Question

如果单击该部分中的某个链接，我正尝试将“active”类添加到菜单的某个部分。我最近学会了如何将活动类（使用jQuery）添加到菜单中的链接（如果已被点击），并相信我可以调整此代码以获得我想要的内容。我在下面发布了它，因为它可能提供灵感。

E.g。如果点击了lil shorty，我想要带有id =“section_3”的ul来获取活动类。如果单击Deriving函数，我希望带有id =“section_2”的ul获取活动类（而section_3将丢失活动类）。注意，在Deriving functions页面上，section_2还必须具有“active class”。

非常感谢任何帮助。

杰克

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

<div class="menu">
<ul class='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_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>
</ul>
</li>
</ul>
  
<ul class='section' id='section_3'>
<li><span id='section_title_3' class='section_title'><a href='#' id='section_link_3'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a></li>
<li id='exhibit_104' class='exhibit_title'><a href='#'>lil shorty</a></li>
</ul>
</div>

Answer 1

我猜你正在寻找父（）或最近（）

$('li').click(function() {
    $('.section').removeClass('active');
    $(this).closest('.section').addClass('active');
});

https://api.jquery.com/closest/

https://api.jquery.com/parent/

将活动类添加到菜单部分

1 个答案: