如何在页面刷新后激活父级ul li或单击子菜单链接

Question

如何在页面重新加载或刷新后保持所选选项卡处于活动状态

函数对父级ul li运行良好，并且当单击父级链接时父级处于活动状态但问题是，当我点击子菜单链接并重定向到另一个页面时，点击的父级ul li并没有激活，每次Home Tab激活或高亮显示页面刷新或重定向到其他页面

例如，我想要这样

 Account Menu is parent menu and child menu like user profile and user accounts
 when i click user profile or user accounts script should active or highlight 
 Account Menu Tab Not Home Tab

此处为Javascript

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function () {
        $("li:first-child").addClass("active");
        $('li').click(function () {
            $('.secondary li').removeClass('active');
            $(this).addClass('active');
        });
    })
    });//]]>  
</script>

Html代码

<div role="navigation" id="navPrimary">
<ul class="secondary">
<li ><a href="#">Home</a></li>
<li><a href="#">Account Menu</a>
<ul>
<li><a href="#">OVERVIEW</a></li>
<li><a href="#">EDIT&nbsp;PROFILE</a></li>
<li><a href="#">MANAGE&nbsp;EMAILS</a></li>
<li><a href="#">EDIT&nbsp;PASSWORD</a></li>
<li><a href="#">CREDIT&nbsp;CARDS</a></li>
<li><a href="#">BANK&nbsp;ACCOUNTS</a></li>
<li><a href="#">CLOSE&nbsp;ACCOUNT</a></li>
<li><a href="#">LOGOUT</a></li>
</ul>
</li>
<li><a href="#">Payments Menu</a>
<ul>
<li><a href="#">OVERVIEW</a></li>
<li><a href="#">EDIT&nbsp;PROFILE</a></li>
<li><a href="#">MANAGE&nbsp;EMAILS</a></li>
<li><a href="#">EDIT&nbsp;PASSWORD</a></li>
<li><a href="#">CREDIT&nbsp;CARDS</a></li>
<li><a href="#">BANK&nbsp;ACCOUNTS</a></li>
<li><a href="#">CLOSE&nbsp;ACCOUNT</a></li>
<li><a href="#">LOGOUT</a></li>
</ul>
</li>
<li><a href="#">Request Money</a>
<ul>
<li><a href="">Manage Invoices</a></li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products &amp; Services</a></li>
</ul>
</div>

更新了Javascript，但不起作用

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
$(document).ready(function () {
    var index = Cookies.get('active');
    $('.secondary').find('a').removeClass('active');
    $(".secondary").find('a').eq(index).addClass('active');
    $('.secondary').on('click', 'li a', function (e) {
        e.preventDefault();
        $('.secondary').find('a').removeClass('active');
        $(this).addClass('active');
        Cookies.set('active', $('.clearfix a').index(this));
    });
});
}//]]>  
</script>

Answer 1

你肯定会把数据存储在某个地方，这是最后一个活动的选项卡。如果你只想在客户端这样做，一个解决方案可以是cookie。请参阅此处：如何使用jQuery设置/取消设置cookie？

如果你使用的是HTML5，那么你可以使用网络存储。请参见此处。

如果您使用PHP渲染页面，则可以使用$_SESSION变量。当用户单击选项卡时，您会发出ajax请求，并将活动选项卡的值存储在$_SESSION变量中，但正如我所看到的，您希望在客户端执行此操作。

更新好的，我只是为你创建的。

第一件事是为我的例子中的每个a元素设置一个id，要知道，wich就是那个。你可以用其他方式来做，但现在这是最简单的。

其次是下载jquery.cookie.js，不要使用URL，将其存储在本地。

第三，如果在客户端机器上禁用cookie，可能会出现问题。

你需要做这样的事情：

HTML

<div role="navigation" id="navPrimary">
    <ul class="secondary">
        <li><a href="#" id="home">Home</a></li>
        <li><a href="#" id="account">Account Menu</a>
            <ul>
                <li><a href="#" id="overview">OVERVIEW</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.active｛font-weight:bold；color:#F00｝

查询

好的，stackoverflow不允许我在这里粘贴代码，但我在这里加载了https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js脚本也是！

<script type='text/javascript'>
    $(function() {
        //$.removeCookie("active");
        var activeMenu = $.cookie("active");
        console.log(activeMenu);
        if (typeof activeMenu === 'undefined') {
            $("#home").addClass("active");
        } else {
            $('#' + activeMenu).addClass('active');
        }
        $('li a').click(function(e) {
            e.preventDefault();
            var listItems = $("#navPrimary li a");
            listItems.each(function(idx, li) {
                $(li).removeClass('active');
            });
            $(this).addClass('active');
            var id = $(this).attr('id');
            $.cookie("active", id);
        });
    })
</script>