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

我已经写了一个字母表导航程序 - 我有锚链接链接到h4标记。当我点击a-tag时，我希望具有匹配ID的元素具有活动类。当您单击另一个锚标签时，它会删除活动类并将其分配给另一个元素。这是我到目前为止：jQuery我想添加一个活动类到锚标记的链接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"); 
} 

});

来源

2017-07-25 stolercloud

您的匿名事件处理函数中有一个已命名的函数，但您永远不会调用它。如果该命名函数确实运行，则会出现多个运行时错误。你可能希望运行一些jQuery教程（可能还有一些基本的JavaScript教程）来掌握语法。 –

您可以将代码减少一行在单击处理：

$('.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() {：当与卷轴类的链接上点击
$(this).attr('href')获取href属性
选择它，并主动类.addClass('active')
将添加到它选择元素的所有兄弟姐妹和删除活动类.siblings().removeClass('active')

来源

2017-07-25 15:07:22 j08691

几件事情需要解决你的代码。

add .给scoller找班。
使用.alpha-heading从以前active.You删除活跃甚至可以做.alpha-heading.active更具体
使用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>

来源

2017-07-25 14:57:49 guradio

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

$(".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>

来源

2017-07-25 14:57:55

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

回答

相关问题