Question

我有一个典型的菜单结构 -

<Ul class="nav">
<li>Menu1</li>
<li>menu2</li>
-------
</ul>

当我点击某个菜单时，根据我在build.html上加载的jquery，它会选择特定的菜单。

<script>
    jQuery(function(){
      jQuery('.nav>li>a').each(function(){
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
  </script>

但是在那个页面上，如果我点击某个链接将我带到其他页面然后当我回来时菜单项不会保持被选中。

如何修改我的jquery来实现这一目标？提前谢谢！

Answer 1

正如SJ-B所说，HTML5 Web存储是一个很好的解决方案。

如果您不打算使用列表菜单点击页面上的一页或两页以上，则可以在链接中添加一个查询，将您带离页面，例如：其中一个列表菜单的ID。

href="somepage.html可能会变成这样的href="somepage.html?menu_id=menu5

使用window.history.back()后，您可以使用id从网址中抓取window.location.search，然后使用id选择列表菜单。

Answer 2

尝试使用HTML5的会话对象。

sessionStorage.varName = id of selected item.

on load只检查sessionStorage.varName是否有值或未定义，如果没有则获取值

`var value = sessionStorage.varName;` and set it.

Answer 3

您可以使用简单的CSS代码。使用活动属性，如

a:active
{
 //Some style
}

Answer 4

您可以使用以下代码来实现此目的。

var lastele=siteurl.substring(siteurl.lastIndexOf("/")+1);
    jQuery(".nav>li> a").each(function(){
    var anchorhref=jQuery(this).attr("href");
    var finalhref=anchorhref.substring(anchorhref.lastIndexOf("/")+1);
    if(finalhref==lastele){
        jQuery(this).addClass("selected");
    }
});

Answer 5

我会做这样的事情：

<ul class="nav">
    <li id="home"><a href="#home">Home</a></li>
    <li id="contact"><a href="#contact">Contact</a></li>
</ul>

Javascript：

// http://mywebsite.com#home
// location.hash === '#home'
jQuery('.nav ' + location.hash).addClass('selected');

Answer 6

那么可能有很多种方式，我喜欢并且总是使用它： It works when you path name is same as your link name例如 yourwebsite.com/Menu1

function setNavigation() {
    var n = window.location.pathname,t;
    n = n.replace("/", "");
    t = $("ul li:contains(" + n + ")");
    t.addClass("active");
}

您可以根据需要在active课程中定义样式。

Answer 7

我在谷歌搜索类似的东西时偶然发现了这一点。我有一个JQueryUI手风琴菜单。我的菜单是一个包含的脚本（经典的asp），所以它在每个页面上，但我认为它是一个类似的情况。我根据SJ-B的回答拼凑了一些东西（不知道为什么会被投票）。

我有这个：

function saveSession(id) {
    if (window.sessionStorage) {
        sessionStorage.activeMenu = $("#jqmenu").accordion("option", "active") ;
        sessionStorage.activeLink = id ;
    }
}

和这个

$(function() {
  //give every li in the menu a unique id
  $('#jqmenu a').attr('id', function(i) {
        return 'link'+(i+1);
  });
  var activeMenu = 0;
  var activeLink = "";
  if (window.sessionStorage) {
    activeMenu = parseInt(sessionStorage.activeMenu);
    activeLink = sessionStorage.activeLink;
  }
  $("#" + activeLink).parent().addClass("selectedmenu");
  $("#jqmenu").accordion({collapsible: true, active: activeMenu, heightStyle: "content", header: "h3"});
  $("#jqmenu a").click(function() { saveSession($(this).attr('id')); });
});

好吧，有点不整洁，从各种建议（我还在学习）拼凑而成，但它似乎有效。试过IE11和Firefox。 Chrome无法找到localhost，但这是另一个故事。

Answer 8

在

下添加行

<script>
    $(function(){
       $("a[href='"+window.location+"']").addClass("selected");
    });
</script>

Answer 9

var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); 
$('.nav li').each(function () {
    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
        $(this).addClass('active');
    }
});

当用户返回页面时，如何使用jquery保持所选菜单处于活动状态？

9 个答案: