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类添加到菜单的部分

回答

相关问题