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>

我正在尝试将.active添加到li.Blyfield，方法是在此页面上检查div id = #Blyfield

Jquery的

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

Answer 2

我们走了：

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

http://aaronrussell.co.uk/legacy/check-if-an-element-exists-using-jquery/

要让它动态运行，只需在Blyfield div中添加一个唯一的类：

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

JS

$( 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');
  } 
});

Answer 3

如果我是你，我会将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>

然后编写jQuery代码：

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

根据页面上的其他ID更新导航

3 个答案: