嘗試將活動類添加到菜單項

Question

我花了2個小時試圖創建沒有成功的活動菜單，所以我想我會尋求幫助。我有一個HTML菜單，一些JS &三網融合

$(function() { 
 
    var pgurl = window.location.href.substr(window.location.href 
 
    .lastIndexOf("/") + 1); 
 
    $("#index li a").each(function() { 
 
    if ($(this).attr("href") == pgurl || $(this).attr("href") == '') 
 
     $(this).addClass("active"); 
 
    }) 
 
});

.active { font-weight:bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='index'> 
 
    <div class='container'> 
 

 
    <div class='top'> 
 
     <h1><a href='/' title='The Maths Project'>The Maths Project</a></h1> 
 
    </div> 
 
    <ul class='section active_section' id='section_2'> 
 
     <li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span> 
 
     <ul> 
 
      <li id='exhibit_106' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
      </li> 
 
      <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
      </li> 
 
      <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class='section' id='section_3'> 
 
     <li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span> 
 
     <ul> 
 
      <li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a> 
 
      </li> 
 
      <li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

當用戶在特定頁面上，「一」的鏈接，他們點擊了哪個應該成爲大膽。但是，無論出於何種原因，它都不起作用。

我將不勝感激任何幫助，

問候，

傑克

Answer 1

此行獲取頁面名稱：

var pgurl = window.location.href.substr(window.location.href 
        .lastIndexOf("/") + 1); 

您需要將相同的邏輯應用到每個環節，以查看它們是否匹配：

$("#index li a").each(function() { 

    var aurl = $(this).attr("href").substr($(this).attr("href") 
        .lastIndexOf("/")+1); 

    if (aurl == pgurl || aurl == '') 
    $(this).addClass("active"); 
}) 

---

片段下面（調整爲匹配，因爲location.href將不匹配）

$(function() { 
 
    //var pgurl = window.location.href.substr(window.location.href 
 
    //     .lastIndexOf("/") + 1); 
 
    var locationhref = "mysite.com/against-the-odds/introduction" 
 
    var pgurl = locationhref.substr(locationhref.lastIndexOf("/")+1); 
 
    $("#index li a").each(function() { 
 
    var aurl = $(this).attr("href").substr($(this).attr("href") 
 
         .lastIndexOf("/")+1); 
 
    //console.log(aurl) 
 
    if (aurl == pgurl || aurl == '') 
 
     $(this).addClass("active"); 
 
    }) 
 
});

.active { font-weight:bold;color:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='index'> 
 
    <div class='container'> 
 

 
    <div class='top'> 
 
     <h1><a href='/' title='The Maths Project'>The Maths Project</a></h1> 
 
    </div> 
 
    <ul class='section active_section' id='section_2'> 
 
     <li><span id='section_title_2' class='section_title'><a href='#' id='section_link_2'>Against the odds.</a></span> 
 
     <ul> 
 
      <li id='exhibit_106' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
      </li> 
 
      <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
      </li> 
 
      <li id='exhibit_83' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    <ul class='section' id='section_3'> 
 
     <li><span id='section_title_3' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_3'>Remembering everything.</a></span> 
 
     <ul> 
 
      <li id='exhibit_104' class='exhibit_title'><a href='../against-the-odds/black-swans'>black swans</a> 
 
      </li> 
 
      <li id='exhibit_72' class='exhibit_title'><a href='../against-the-odds/in-here-it-is-yesterday'>in here it is yesterday </a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

我不是你的問題清楚，但你要設置活動類菜單，讓你試試下面的代碼

$('#navlist a').click(function(e) { 
 
    e.preventDefault(); //prevent the link from being followed 
 
    $('#navlist a').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
});

.nav { 
 
    color: green; 
 
} 
 
.selected { 
 
    color: red; 
 
} 
 
.san ul li{ 
 
    float:left; 
 
    margin-right: 25px; 
 
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
 
<div class="san"> 
 
    <ul id="navlist"> 
 
     <li><a class="nav" href="">Home</a></li> 
 
     <li><a class="nav" href="">About Us</a></li> 
 
     <li><a class="nav" href="">Services</a></li> 
 
     <li><a class="nav" href="">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 3

請嘗試以下操作並檢查它是否有效。

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $("#index li a").each(function() { 
     var href = ""; 
     if($(this).attr("href") != '') 
      href = $(this).attr("href").substr(($(this).attr("href").lastIndexOf("/")+1); 
      if (href == pgurl || href == '') 
        $(this).addClass("active"); 
     }) 
    }); 

Answer 4

只是遍歷整個鏈接，當任何一個環節都會點擊然後更改字體重量：正常所有鏈接，然後應用字體重量：大膽到目前點擊鏈接。

$().ready(function() { 
     $("ul>li").click(function() { 
      $("ul>li").css("font-weight", "normal"); 
      $(this).css("font-weight", "bold"); 
     }); 
    });