javascript - 将 active_section 类添加到菜单部分

Question

我有一个如下所示的 html 菜单...

<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>

它由几个包含链接(与该部分相关)的“部分”组成。每个部分都有一个主标题(例如 Against the odds.)和几个子部分(存储在另一个 ul 中)，如“派生函数”。默认情况下，子部分设置为 display: none(如果用户愿意，我有 jQuery 可以打开子部分)。

问题:

一旦用户点击子部分链接(例如 www.themathsproject.co.uk/against-the-odds/deriving-functions)，我想要包含链接的子部分(在 id= section_1) 在页面重新加载时打开，以便用户可以轻松导航到该部分中的其他链接。其他子部分将保持关闭状态。

我想编写一个 jQuery 函数，将当前页面 url 与每个部分中的链接进行比较，如果找到匹配项，则将“active_section”类分配给相关部分。不幸的是，我不知道该怎么做。

我整天都被困在这个问题上，但进展甚微。

如果有任何帮助，我将不胜感激

jack

Answer 1

你的帖子有点乱，所以我会尽量给你一个一般性的提示。

要获取 url 的最后一个元素，请使用

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" };

使用我提供的第一行代码获取 url 后，您可以:

name = sectionMap[name];