• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 333
  • Last Modified:

how to setup active tab css using jquery

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.
  • 3
  • 2
1 Solution
If you just mean to change the styling of the selected tab then just add a selected class to your css
mmalik15Author Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    <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.
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.
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

mmalik15Author Commented:
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
No, see my previous comment.
But...you 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.
Hi mmalik15,

try this

Good luck & hopefully can help u ^^
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now