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

如何在页面重新加载或刷新后保持所选选项卡处于活动状态我正在使用drop line导航菜单

该功能对于父级ul li工作正常，并且在单击父级链接时父级也处于活动状态 但问题是，当我单击子菜单链接并重定向到另一个页面时，然后单击父菜单链接并没有激活，并且每当页面刷新或重定向到另一个页面时，

Home选项卡

都会激活或突出显示

例如，我希望这样

 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>

//

您肯定会将数据存储在某个地方，这是最后一个活动选项卡。如果您只想在客户端执行此操作，一种解决方案可以是cookies。请看这里：

如果您使用的是HTML5，那么您可以使用web存储

如果您是通过PHP呈现页面，则可以使用

$\u SESSION

变量进行此操作。当用户单击一个选项卡时，您会发出一个ajax请求，并将活动选项卡的值存储在$\u会话变量中，但正如我看到的，您希望在客户端执行此操作

更新 好的，我刚刚为你做的

第一件事是为我的示例中的每个a元素设置一个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{font-weight:粗体；color:#F00}

JQUERY

好的，stacoverflow不允许我在这里粘贴代码，但我在这里加载了 脚本也

<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>

$（函数（）{
//$.removeCookie（“活动”）；
var activeMenu=$.cookie（“活动”）；
log（activeMenu）；
如果（活动菜单的类型==='undefined'）{
$（“#主页”）.addClass（“活动”）；
}否则{
$（'#'+activeMenu）.addClass（'active'）；
}
$（'li a'）。单击（函数（e）{
e、 预防默认值（）；
var listItems=$（“#NAVLI a”）；
listItems.each（函数（idx，li）{
$（li）.removeClass（'active'）；
});
$（this.addClass（'active'）；
var id=$（this.attr（'id'）；
$.cookie（“活动”，id）；
});
})

您需要html5本地存储，haha@DanielCheung有什么好笑的？@MelanciaUK你得到了我想要的东西请帮助我谢谢你不要搞笑。。。您需要在现代浏览器中使用cookie或本地存储将所选值保留在某个位置。@MelanciaUK但我该怎么办？？？我是jquery的新用户，请帮忙这个链接怎么样？我已经找到了解决方案，可能会有用吗？当然可以。正如我提到的，您需要下载并加载我尝试过但未成功的，但您可以在此处看到：但当您单击Overview OK时，它应该只突出显示

帐户菜单

。但是现在你看到了逻辑，饼干是如何工作的。只需简单地单击添加ulli，然后找到所需的元素。现在我要走了，请试着找出，我做了什么，并搜索最近的，找到，父母，等等。。。jquery函数，并使用它们。