Question

我试图通过单击<a>标签在具有ID的部分上添加Class，如果单击其他<a>标签则将其删除。我在控制台中获取元素，但不知道为什么它没有通过jquery上课。

<nav class="navbar navbar-expand-md fixed-top scrolling-navbar bg-white">
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto w-100 justify-content-end">
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#features">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#portfolios">Works</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#team">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
</nav>

  <section id="features" class="section">
  </section>

  <section id="portfolios" class="section">
  </section>

  <section id="team" class="section">
  </section>

  <div id="subscribe" class="section">
  </div>

  <section id="contact" class="section">
  </section>

var clicktarget = $(".navbar-expand-md .navbar-nav .nav-link");

   $(clicktarget).click(function(e){
    let target = $(this).attr('href');
    let hidepanel = $("body").find("section[id='" + target + "']"); 
    e.preventDefault();
    $(hidepanel).addClass("styleb"); 
    console.log(hidepanel);
  });

Answer 1

这里有两个问题。首先，类navbar-expand-md中没有元素-尽管我假设您的示例HTML中只是省略了此元素。

第二，您将两个jQuery对象双重包装。如果变量已经包含jQuery对象，例如clicktarget或hidepanel，则可以直接访问它的jQuery方法，而无需再次使用$()。

第三，您可以简化id属性选择器，使其仅直接使用attr()值，因为它已经具有使用所需的格式。

最后，如果一次只显示一个.section，则需要调用当前removeClass()来隐藏它。

话虽如此，请尝试以下操作：

var $clicktarget = $(".navbar-nav .nav-link");

$clicktarget.click(function(e) {
  e.preventDefault();
  
  $('.styleb').removeClass('styleb');
  let target = $(this).attr('href');
  $(target).addClass("styleb");
});

.section {
  display: none;
}
.section.styleb {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav mr-auto w-100 justify-content-end">
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#features">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#portfolios">Works</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#team">Team</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
    </li>
    <li class="nav-item">
      <a class="nav-link page-scroll" href="#contact">Contact</a>
    </li>
  </ul>
</div>

<section id="features" class="section">Features</section>
<section id="portfolios" class="section">Portfolios</section>
<section id="team" class="section">Team</section>
<div id="subscribe" class="section">Subscribe</div>
<section id="contact" class="section">Contact</section>

Answer 2

单击链接即可获得href，您可以在选择器中直接使用它来选择部分。

var target=$(this).attr('href'); $(target).addClass("styleb");
仅在click函数内部，通过使用应用的类对其进行选择即可删除该节的类

$('.styleb').removeClass('styleb')

   $('a').click(function(e){
   $('.styleb').removeClass('styleb')
    var target=$(this).attr('href');
    $(target).addClass("styleb"); 
  });

.styleb
{
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto w-100 justify-content-end">
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#features">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#portfolios">Works</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#team">Team</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#subscribe">Subscribe</a>
      </li>
      <li class="nav-item">
        <a class="nav-link page-scroll" href="#contact">Contact</a>
      </li>
    </ul>
  </div>

  <section id="features" class="section">
  a
  </section>

  <section id="portfolios" class="section">
  v
  </section>

  <section id="team" class="section">
  f
  </section>

  <div id="subscribe" class="section">
  s
  </div>

  <section id="contact" class="section">
  </section>

试图通过变量在元素上插入类

2 个答案: