Tab style nav bar with Jquery

Question

Hi I have been trying to find an answer to this question. I am trying to create a nav bar using jquery that uses rollovers. So there is an On state, off state, clicked state for three diffrent tabs/images.

example: Home | Support | About

The problme i'm having is getting the clicked/on state to turn off the other image/tab if it was already on/clicked state. What keeps hapening is each tab stays active when clicked instead of toggling off and on.

Here is the code

$(document).ready(function() {


    // Navigation rollovers
    $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);

        // don't do the rollover if state is already ON
        if (!matches) {
        imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcON);
        }

    });

        $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        matchesclk = imgsrc.match(/_clk/);


        if (!matchesclk) {
        imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension
        $(this).children("img").attr("src", imgsrcClkON);
        }

    }); 

    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });


});

Any help would be appreciated. I am new to jquery and I am really having a touch time with this.

I have but I cannot meet the design requirements without using images. — Rob, Jul 30 '09 at 19:21
I'm saying, have you tried CSS with images? Virtually any rollover effect you do in jscript/jquery can be achieved (more easily and efficiently) with plain CSS — Jason, Jul 30 '09 at 19:23
No I have not tried because I could not think of a way to do a click state using CSS. I need to have more control then just hover. I also need a clicked/active state. Do you have an example that could help me? — Rob, Jul 30 '09 at 19:26

Jason · Answer 1 · 2009-07-30T19:39:49.787

1

Try CSS instead. Here's an article regarding the Sliding Doors technique:

http://www.alistapart.com/articles/slidingdoors/

EDIT Here's how you could apply click state (assuming your HTML is valid):

$(".yourLink").cick(function() {
   $(".yourLink").removeClass("selected");
   $(this).addClass("selected");
});

And just make sure you define the "selected" class in your CSS.

edited Jul 30 '09 at 19:39

answered Jul 30 '09 at 19:24

Jason

51,583
38
133
185

score 0 · Answer 2 · answered Jul 30 '09 at 19:31

In conjuction with using background images + CSS for the tabs' appearance (as mentioned above), I suggest you denote your different link states using classes and then adjust your CSS from there. E.g.:

<div id="nav">
  <a class="on" href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
  <a href="#">Link 1</a>
</div>

<style type="text/css">
  #nav a { color: blue; }
  #nav a.on { color: red; }
  #nav a.current { color: green; }
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#nav a').hover(
            function(){ $(this).addClass('on'); },
            function(){ $(this).removeClass('on'); }
        );
    });
</script>

Etc.

score 0 · Accepted Answer · edited Jan 30 '20 at 04:59

0

Will this work for you?

<style>
    .click {
        background-image: url(images/click.png);
    }

    .over {
        background-image: url(images/over.png);
    }
</style>

<script>
    $(document).ready(function () {
        $("#nav a").mouseover(function () {
            if ($(this).attr("class") != "click")
                $(this).addClass("over");
        });

        $("#nav a").click(function () {
            $("#nav a.click").removeClass("click");
            $(this).addClass("click");
        });

        $("#nav a").mouseout(function () {
            $(this).removeClass("over");
        });
    });
</script>

<div id="nav">
    <a>One</a>
    <a>Tw0</a>
    <a>Three</a>
</div>

edited Jan 30 '20 at 04:59

ankitkanojia

3,072
4
22
35

answered Jul 30 '09 at 19:47

tessa

734
1
8
22

Thanks but it looks like in that example I would need to have a diffrent class for each image. That seem a bit inefficient which is why I was going the jquery route. In the example I posted I just wanted to fix the code so that when a tab is clicked it activates the current tabs click state and deactivates any other tabs that were previously clicked. I was able to do this in javascript easily however I have been unable to replicate this in jquery. – Rob Jul 30 '09 at 20:14
I don't believe it is inefficient to have two classes for click and over. To me, it's much cleaner to use addclass and removeclass rather than checking src attributes using match and replace. This accomplishes with less code what you are trying to do in your original sample. – tessa Jul 30 '09 at 21:20

Tab style nav bar with Jquery

3 Answers3