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. 添加. 湊巧去上課。
2. 使用.alpha-heading從以前的活動中刪除活動。您甚至可以執行.alpha .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

首先，您需要添加missing . 在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

您可以在點擊處理程序中將代碼縮減為一行：

 $('.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')刪除活動類