如何在页面刷新或单击子菜单链接后激活父 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 变量中，但正如我所见，您想在客户端执行此操作。

更新好的，我刚刚为你创建了它。

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

二是下载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 {字体粗细：粗体； 颜色：#F00}

查询

好的，stacoverflow 不允许我在这里粘贴代码，但我也在这里加载了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>