Question

如何删除继承的类。我有一个JavaScript班(js--main-nav)的UL。在UL中，我有一些li（具有class =“socialIconHeader”的那些），我想从中删除继承的js--main-nav类。我尝试使用CSS和jQuery，但我无法让它发挥作用。关于如何删除继承类的任何输入都将不胜感激。

<nav>
  <div class="row">
    <img src="assets/images/Logo_white.png" alt="ATCD Logo" class="logo" />
    <img src="assets/images/Logo_black.png" alt="ATCD Logo" class="logo-black" />
    <ul class="main-nav js--main-nav">
      <li> 
        <a href="#features">About</a>
      </li>
      <li> 
        <a href="#services">Services</a>
      </li>
      <li> 
        <a href="https://www.behance.net/" target="_blank">Portfolio</a>
      </li>
      <li> 
        <a href="#states">Locations</a>
      </li>
      <li> 
        <a href="#contact">Contact</a>
      </li>
      <li>
        <a href="http://atcdllc2.atcdllc.com/forum/">Forum</a>
      </li>
      <li></li>
      <li class="socialIconHeader">
        <a href="https://www.facebook.com/atcdllc">
          <i class="ion-social-facebook"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://twitter.com/atcdllc">
          <i class="ion-social-twitter"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="#">
          <i class="ion-social-googleplus"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://www.linkedin.com">
          <i class="ion-social-linkedin"></i>
        </a>
      </li>
    </ul>
    <a class="mobile-nav-icon js--nav-icon">
      <i class="ion-navicon-round"></i>
    </a>
  </div>
</nav>

Answer 1

 $(".socialIconHeader").removeClass("js--main-nav");

Answer 2

您可以使用解决方案

＆＃13;

$('li.socialIconHeader').each(function(){
  if($(this).hasClass('js--main-nav'))
    $(this).removeClass('js--main-nav');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="row">
    <img src="assets/images/Logo_white.png" alt="ATCD Logo" class="logo" />
    <img src="assets/images/Logo_black.png" alt="ATCD Logo" class="logo-black" />
    <ul class="main-nav js--main-nav">
      <li> 
        <a href="#features">About</a>
      </li>
      <li> 
        <a href="#services">Services</a>
      </li>
      <li> 
        <a href="https://www.behance.net/" target="_blank">Portfolio</a>
      </li>
      <li> 
        <a href="#states">Locations</a>
      </li>
      <li> 
        <a href="#contact">Contact</a>
      </li>
      <li>
        <a href="http://atcdllc2.atcdllc.com/forum/">Forum</a>
      </li>
      <li></li>
      <li class="socialIconHeader">
        <a href="https://www.facebook.com/atcdllc">
          <i class="ion-social-facebook"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://twitter.com/atcdllc">
          <i class="ion-social-twitter"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="#">
          <i class="ion-social-googleplus"></i>
        </a>
      </li>
      <li class="socialIconHeader">
        <a href="https://www.linkedin.com">
          <i class="ion-social-linkedin"></i>
        </a>
      </li>
    </ul>
    <a class="mobile-nav-icon js--nav-icon">
      <i class="ion-navicon-round"></i>
    </a>
  </div>
</nav>

＆＃13;

我只是循环遍历具有类li的所有socialIconHeader，然后检查是否存在类js--main-nav，如果存在，则仅删除该类。

希望这会有所帮助。

从元素中删除继承的类

2 个答案: