【问题标题】:Jquery - addClass('active') to Top Navigation if it matches current parent of active link in accordion.Jquery - 如果它与手风琴中活动链接的当前父项匹配,则将其添加到顶部导航。
【发布时间】:2011-01-18 13:53:27
【问题描述】:

问题是我的导航分为两部分。顶部导航和左侧导航。如果左侧导航的兄弟是当前 url,我需要告诉顶部链接有一个“.active”类。

EX:如果您使用的是 about ie -“Bio”的子链接,我需要告诉顶部导航链接“About”链接具有 .active 类。

首页 |关于 |联系方式

<ul id="leftnav">
      <li>Home</li>
      <li><a href="ul.com/">About</a>
            <ul>
                  <li>Bio</li>
                  <li>History</li>
                  <li>Location</li>
            </ul>
      </li>
      <li>Contact</li>
</ul>

我试过了:

$(document).ready(function() {
    currentPage = window.location.pathname;
    if( $('.sidebarNav li a[href$="' + currentPage + '"]').parent('#aboutParent')) {
        $('#aboutTopNav a').addClass('active');
    }
});

【问题讨论】:

  • 您应该包含您的源 html。但我认为这应该在服务器端完成。
  • 我很想做这个服务器端,但是我正在与需要静态 html 页面的客户合作。

标签: jquery navigation accordion addclass


【解决方案1】:

使用 jQuery 树遍历来满足您的需求:http://api.jquery.com/category/traversing/tree-traversal/

【讨论】:

  • 我有树在手风琴内工作,当我需要在手风琴外打破并告诉单独导航中的链接具有特定类时,问题就出现了。
【解决方案2】:
$(document).ready(function() {
var href_array= window.location.pathname.split("/");
var part_num = 0;
while (part_num < href_array.length) {
    lastPart = href_array[part_num];
    part_num += 1;
}
//alert( lastPart);

$('#navigationArea a[href*="' + lastPart + '"]').parentsUntil('.sub').addClass('active');

});

在我的示例中,“.sub”是一个类,但我认为它也适用于您的 id。

【讨论】:

  • 我正在使用两个导航,一个在网站顶部,一个在手风琴中我需要手风琴中的兄弟姐妹告诉顶部导航(手风琴外)中的匹配链接一类活跃。请参见上面的示例。但感谢您的帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-01-15
  • 2018-08-27
  • 2016-06-29
  • 1970-01-01
  • 2018-12-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多