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

Question

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu

function is working fine for parent ul li and also parent active when click on parent link but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page

for example i want like this

 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

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

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

Updated Javascript but not working

<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

You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?

If you are using HTML5, then you can use web storage. See here.

If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.

UPDATE Ok, i just created it for you.

First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.

Second is to download the jquery.cookie.js, and do not use the URL, store it locally.

Third, here could be a problem, if cookies are disabled on the client machine.

You need to do something like this:

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}

JQUERY

ok, stacoverflow does not allow me to paste here a code but i loaded here the https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!

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