how to setup active tab css using jquery

Posted on 2012-09-05
Last Modified: 2012-09-17
I have a navigation of few pages on my site like this
<div id="topnav">
                    <ul class="Menu">
                        <li class="Selected"><a href="home.html">Home</a></li>
                        <li><a href="seminars.html">Seminars</a></li>
                        <li><a href="hitclick1.html">Hit Click 1</a></li>

Open in new window

This navigation list menu is same on all three pages except there is no class="Selected" present

Using Jquery how can I set up class="Selected" of the list where the page has loaded.
Question by:mmalik15
    LVL 58

    Expert Comment

    If you just mean to change the styling of the selected tab then just add a selected class to your css

    Author Comment

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
        <script type="text/javascript" src="">
        <title>jQuery Hello World Alert box</title>
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <script src="JScript2.js" type="text/javascript"></script>
        <ul id="navigation">
            <li class="Selected"><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
        <button id="cl">
            Click Me</button>

    Open in new window

    using the JQUERY

       $(document).ready(function () {
                $("#navigation li").click(function () {
                $('#navigation li').removeClass('Selected');

    Open in new window

    the above works fine on the same page but see the site

    if a user clicks on a tab on the top that tab should have selected class applied.
    LVL 58

    Expert Comment

    Everytime you click a tab then a new page is loaded and JQuery does not know which tab should be highlighted - you need to add class="selected" to the tab at the server when you build the page.

    Author Comment

    I mean I have this ul li menu on every page. All the li elements are linked to different pages on the site. I can set li class=selected on all the relevant pages e.g on seminar.html page i can set the menu item like li class=selected in the markup but wondering if this can be done dynamically
    LVL 58

    Accepted Solution

    No, see my previous comment. could analyse the url to find the page name and then assuming some correlation between the page name and the tab id/name select the tab and highlight it - but this is a lot of work for something that can be done at the server with one line of code.
    LVL 4

    Expert Comment

    Hi mmalik15,

    try this

    Good luck & hopefully can help u ^^

    Featured Post

    Why You Should Analyze Threat Actor TTPs

    After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

    Join & Write a Comment

    Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
    What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now