jquery - 根据页面上的另一个 ID 更新导航

Question

我正在尝试匹配导航列表项上的类和当前的 div id。

Blyfield 页面上的 html:

    <ul>
        <li class="Blyfield"><a href="#">Name Blyfield</a> </li>
        <li class="Britton"><a href="#">Name Britton</a> </li>
        <li class="Cottrell"><a href="#">Name Cottrell</a> </li>
    </ul>

    <div id="Blyfield" class="artist_intro">
        content
    </div>

我正在尝试通过检查此页面上的 div id = #Blyfield.active 添加到 li.Blyfield/p>

查询

var bodyID = $(".artist_intro").attr("id");


  if ( $(".artist li").hasClass('bodyID') ) {
  $(this).addClass('active')};

我的 jquery 似乎不起作用，我是否正确使用了 hasClass？

Answer 1

这是简单的答案。您需要使用 each 函数来检查所有 li 字段。

$(document).ready(function(){

 var bodyID = $(".artist_intro").attr("id");

 $(".artist li").each(function(){
  if ($(this).hasClass(bodyID)) {
      $(this).addClass('active');
   }
 });

});

DEMO