Jquery 基于页面上的另一个ID更新导航

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

Blyfield页面上的html：

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

我们开始：

$( document ).ready(function() {
  if ($("#Blyfield").length > 0){
    $('li.Blyfield').addClass('active');
  } 
});

要使其动态工作，只需向Blyfield div添加一个独特的类：

HTML

---

如果我是你，我会将HTML编辑为：

<ul class="nav">
    <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="in-nav artist_intro" data-navitem="Blyfield">
    content
</div>

---

这是一个简单的答案。您需要使用

每个

函数来检查所有

li

字段

$(document).ready(function(){

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

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

});

---

这里的问题是什么？你能解释一下你到底需要什么吗？是的，但如果名称是动态的，我会如何将其用于Britton或Cottrell？看看我的编辑。您必须将

uniqueClass

类添加到#Britton和#Cottrell div，并确保它们位于不同的页面上。谢谢。正确，我忘记了for each，还有一些其他语法错误。但我就快到了，谢谢你的帮助！我相信这是突出显示nav项的更好方法，但我希望尽可能限制对jQuery的更改，以了解可以改进的地方。谢谢你抽出时间！

<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="uniqueClass artist_intro">
    content
</div>

$( document ).ready(function() {
  //check if there is a content-div
  if ($(".uniqueClass").length > 0){
    //Get the ID of the content-div = Class of the active li
    var id = $('.uniqueClass').attr('id');
    //addClass to li-element
    $('li.'+id).addClass('active');
  } 
});

<ul class="nav">
    <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="in-nav artist_intro" data-navitem="Blyfield">
    content
</div>

if( $('.in-nav').length > 0 ){
    var navClass = $('.in-nav').data('navitem');
    $('.nav').find('.'+navClass).addClass('active');
}

$(document).ready(function(){

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

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

});