javascript - jQuery 我想将事件类添加到 anchor 标记的链接 ID

Question

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

<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

您可以将点击处理程序中的代码缩减为一行:

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

.active {
  background: #faa;
}

<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>

其工作方式如下:

• $('.scroller').click(function() {:点击带有scroller类的链接时
• $(this).attr('href') 获取href属性
• 选择它并使用 .addClass('active') 添加事件类
• 选择该元素的所有同级元素，并使用 .siblings().removeClass('active') 删除事件类