[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • 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>
                        
                        
                    </ul>
                </div>

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.
0
mmalik15
Asked:
mmalik15
  • 3
  • 2
1 Solution
 
GaryCommented:
If you just mean to change the styling of the selected tab then just add a selected class to your css
0
 
mmalik15Author Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
    <title>jQuery Hello World Alert box</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="JScript2.js" type="text/javascript"></script>
</head>
<body>
    <ul id="navigation">
        <li class="Selected"><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    <button id="cl">
        Click Me</button>
</body>
</html>

Open in new window


using the JQUERY

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

Open in new window


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


109.109.245.194/hitclick/home.html

if a user clicks on a tab on the top that tab should have selected class applied.
0
 
GaryCommented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
0
 
GaryCommented:
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.
0
 
ahann87Commented:
Hi mmalik15,

try this
http://jqueryui.com/demos/tabs/
http://jquerytools.org/

Good luck & hopefully can help u ^^
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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