jQueryアンカータグのリンクIDにアクティブなクラスを追加したい

Question

アルファベットのナビゲーションプログラムを作成しました - 私はh4タグにリンクされたアンカーリンクを持っています。私がaタグをクリックすると、一致する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

：

$('.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() {：href属性
• は、それを選択し、.addClass('active')
• でそれにアクティブクラスを追加取得スクロールクラスとのリンクに
• $(this).attr('href')をクリックすると、その要素のすべての兄弟を選択し、 .siblings().removeClass('active')

Answer 2

あなたのコードで修正する必要があるものはほとんどありません。

1. .を追加して、クラスを探す。
2. 以前active.Youからアクティブ削除する使用.alpha-headingも、すべてのより具体的な
3. IDセレクタとして使用matchID

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

まずする.alpha-heading.activeを行うことができ、あなたが必要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>