jQuery我想在锚标记的链接ID中添加一个活动类

Question

我已经写了一个字母导航程序 - 我有锚链接到h4标签。当我单击a-tag时，我希望具有匹配ID的元素具有一个活动类。当您单击另一个锚标记时，它会删除活动类并将其分配给另一个元素。这是我到目前为止所做的：

<ul class="no-bullet inline">
            <li><a class="scroller" href="#a"><strong>A</strong></a></li>
            <li><a class="scroller" href="#b"><strong>B</strong></a></li>
            <li><a class="scroller" href="#c"><strong>C</strong></a></li>

          </ul>

<h4 class="alpha-heading" id="a"><strong>A</strong></h4>

<h4 class="alpha-heading" id="b"><strong>B</strong></h4>

<h4 class="alpha-heading" id="c"><strong>C</strong></h4>


$("scroller").on("click", function(){
function matchAlpha(){
var matchID = $(this).attr("href");
find.$(matchID).find.$(alpha-heading).removeClass("active");
find.$(matchID).find.$(this).$(alpha-heading).addClass("active");
}

});

Answer 1

您的代码中很少需要修复。

1. 将.添加到scoller以查找课程。
2. 使用.alpha-heading删除之前有效的有效内容。您甚至可以.alpha-heading.active更具体
3. 使用matchID作为ID选择器

$(".scroller").on("click", function() {
  var matchID = $(this).attr("href");
  //$('.alpha-heading').removeClass("active");
  $('.alpha-heading.active').removeClass("active");
  $(matchID).addClass("active");


});

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-bullet inline">
  <li><a class="scroller" href="#a"><strong>A</strong></a></li>
  <li><a class="scroller" href="#b"><strong>B</strong></a></li>
  <li><a class="scroller" href="#c"><strong>C</strong></a></li>

</ul>

<h4 class="alpha-heading" id="a"><strong>A</strong></h4>

<h4 class="alpha-heading" id="b"><strong>B</strong></h4>

<h4 class="alpha-heading" id="c"><strong>C</strong></h4>

Answer 2

首先，您需要在.中添加缺少的scroller，然后使用href作为选择器为所点击的元素添加活动类。以下是您的代码的更新工作版本：

$(".scroller").on("click", function() {
  $('h4.alpha-heading').removeClass('active');
  $($(this).attr('href')).addClass('active');
});

.active {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-bullet inline">
  <li><a class="scroller" href="#a"><strong>A</strong></a></li>
  <li><a class="scroller" href="#b"><strong>B</strong></a></li>
  <li><a class="scroller" href="#c"><strong>C</strong></a></li>

</ul>

<h4 class="alpha-heading" id="a"><strong>A</strong></h4>

<h4 class="alpha-heading" id="b"><strong>B</strong></h4>

<h4 class="alpha-heading" id="c"><strong>C</strong></h4>

Answer 3

您可以在点击处理程序中将代码缩减为单行：

＆＃13;

＆＃13;

$('.scroller').click(function() {
  $($(this).attr('href')).addClass('active').siblings().removeClass('active')
})

＆＃13;

.active {
  background: #faa;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-bullet inline">
  <li><a class="scroller" href="#a"><strong>A</strong></a></li>
  <li><a class="scroller" href="#b"><strong>B</strong></a></li>
  <li><a class="scroller" href="#c"><strong>C</strong></a></li>

</ul>

<h4 class="alpha-heading" id="a"><strong>A</strong></h4>

<h4 class="alpha-heading" id="b"><strong>B</strong></h4>

<h4 class="alpha-heading" id="c"><strong>C</strong></h4>

＆＃13;

＆＃13;

＆＃13;

其工作方式如下：

• $('.scroller').click(function() {：点击带有滚动类的链接
• $(this).attr('href')获取href属性
• 选择它并使用.addClass('active')
将活动类添加到其中
• 选择该元素的所有兄弟节点，然后使用.siblings().removeClass('active')
删除活动类