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

你肯定会存储数据的某个地方，这是最后一个活动标签。如果您只想在客户端执行此操作，则可以使用一种解决方案。见这里：How do I set/unset cookie with jQuery?

如果您使用的是HTML5，则可以使用网络存储。 See here.

如果您使用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 {font-weight：bold;颜色：＃F00}

<强> JQUERY

好吧，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>

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

1 个答案: