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>

它由几个“部分”组成，其中包含链接（与该部分相关）。每个部分都有一个主标题（例如，反对赔率）和几个子部分（存储在另一个ul中），如“派生函数”。默认情况下，子节设置为display: none（如果用户愿意，我有jQuery打开子节）。

问题：

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

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

我整天都被困在这里，并且取得了一些进展。

我非常感谢任何帮助，

杰克

Answer 1

你的帖子有点混乱，所以我会尽力给你一些提示。

要获取网址的最后一个元素

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

将active_section类添加到菜单部分

1 个答案: