active_section類添加到菜單的部分

我有如下一個HTML菜單...active_section類添加到菜單的部分

<ul class="menu" id="menu"> 
 
    <ul class='section' id='section_1'> 
 
    <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> 
 
     <ul> 
 
     <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> 
 
     </li> 
 
     <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> 
 
     </li> 
 
     <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> 
 
     </li> 
 
     <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_2'> 
 
    <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> 
 
     <ul> 
 
     <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_5'> 
 
    <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> 
 
     <ul> 
 
     <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> 
 
     </li> 
 
     <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> 
 
     </li> 
 
     <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <ul class='section' id='section_4'> 
 
    <div class='bot'> 
 
     <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> 
 
     <br /> 
 
     <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> 
 
     </p> 
 
    </div> 
 
    </ul> 
 
</ul>

它由幾個「節」，這房子鏈接（相關的部分）。每個部分都有一個主標題（例如「反對可能性」）和幾個子部分（存儲在另一個ul中），如「派生函數」。小節默認設置爲display: none（我有jQuery，如果用戶希望打開子節）。

問題：

一旦一個子欄目的鏈接用戶點擊（例如www.themathsproject.co.uk/against-the-odds/deriving-functions），我想分節其中包含要在頁面重新加載時打開的鏈接（在id = section_1的情況下），以便用戶可以輕鬆導航到該部分中的其他鏈接。其他小節將保持關閉。

我想寫一個jQuery函數，它將當前頁面url與每個部分中的鏈接進行比較，如果找到匹配項，則將「active_section」類分配給相關部分。不幸的是，我不知道該怎麼做。

我一直被困在這一整天，並取得了一些進展。

我將不勝感激任何幫助，

傑克

來源

2017-01-15 Jack

您的文章是有點亂，所以我會盡量給你一個總體的提示。

爲了讓您的網址的最後一個元素使用

var name = window.href.substr(this.href.lastIndexOf('/') + 1)

現在你可以讓所有的小節並超過他們迭代（例如使用jQuery）：

$('.sub-section').each(function() { 
    if ($(this).attr('id') === name) { 
     $(this).addClass('active'); 
    } 
});

如果你的ID是不同於在URL名稱，你可以創建字典映射的等價物：

var sectionMap = { "section-name-1": "sectionID1" };

和之後使用我提供的第一行代碼獲取網址，您可以這樣做：

name = sectionMap[name];

來源

2017-01-15 23:12:03

active_section類添加到菜單的部分

回答

相關問題