CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
JN_newbie
JN_newbie

Reputation: 6062

add class on li remove after page load

I am using jquery to add the class to active css on "li" and also navigate to an html page.but after page navigates the class disappers on "li". I have tried different ways to resolve this but couldn't get the point.

$(document).ready(function(){
    $( '#topList ul li' ).click(function() {
        alert($(this).attr('id'));


        if($(this).attr('id') == "add") {            
            document.location.href = 'localhost:8080/add';
            $(this).attr('id').addClass("active");            
        }
    });    
});

here is the menu list, what I want is when I click on li it should call a page add and also add a class on that li.

html code

<ul class="nav">
    <li class="" id="add"><a href="javascript:void(0);"  ><i class="add"></i> Add</a>      </li>
<ul>

Upvotes: 0

Views: 4057

Answers (3)

Irfan TahirKheli
Irfan TahirKheli

Reputation: 3662

Use the following script on the page where you have menu or the links. 

<div id="cssmenu">
<a href="blah blah" > Test page</a>
<a href="blah blah" > Test page</a>
</div>





   $(document).ready(function () {
                var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");

                $('#cssmenu a').each(function () {
                    if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
                        $(this).addClass('active');
                });



            });

Upvotes: 1

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

You need to add class for the li in the page you are calling ie, the page will be rendered when you call localhost:8080/add. Because in your code setting up of active class wont be called since the localhost:8080/add will start loading in the previous line of code (document.location.href = 'localhost:8080/add';)

If the page to be rendered is static page then, add this code in that page.

$(document).ready(function(){
 $('#add').addClass("active"); 
});

Upvotes: 2

PaulProgrammer
PaulProgrammer

Reputation: 17630

I solved this problem on my website by looking at the URL and deciding which of the navigation elements was best to add.

function showContent(target) {
    var e = $('#'+target);
    $(".content").hide();
    $("#nav li.active").removeClass("active");
    $("#nav li[target='"+target+"']").addClass("active");
    e.toggle();
    ga('send','pageview',window.location.pathname+"#"+target);
}

// this looks at the URL (by the #...) and decides which view is active
// this gets called on ready and if the client hits the link 
//   (which dynamically loads instead of making a trip for a new page to the server)
$(window).hashchange(function() {
    var which=window.location.hash.substring(1);
    switch( which) {
    default:
        which="profile";
    case "profile":
    case "resume":
    case "projects":
    case "contact":
        showContent( which);
    }
});

Upvotes: 1

Related Questions