addClass Takes Two Clicks To Function

[georgiadogs]

I'm using "Coda-Slider 2.0" for a tab-based interface. I used external triggers to switch between tabs, and I'm having trouble adding my "selected" class when I click on one of the triggers.

It works...BUT...it takes two clicks for it to respond correctly. The slider works just fine, but the "selected" class isn't added (i.e. the selected tab gets a different background image) until I click on one of the menu items twice. Here is the JavaScript I used:

$("a").click(function(){
    $(".menu a.selected").removeClass("selected");   // remove previous class if there is any
    $(this).addClass("selected");                             // add class to the clicked link
    return false;                                                              // prevents browser from following clicked link
});

And here is the HTML. The "xtrig" class is required for it to be used as an external trigger for the slider.

<ul class="menu">
		<li class="day1"><a class="selected xtrig" href="#1" rel="coda-slider-1">Day 1</a></li>
		<li class="day2"><a class="xtrig" href="#2" rel="coda-slider-1">Day 2</a></li>
		<li class="day3"><a class="xtrig" href="#3" rel="coda-slider-1">Day 3</a></li>
                 <li class="day4"><a class="xtrig" href="#4" rel="coda-slider-1">Day 4</a></li>
</ul>

Any ideas why it would take two clicks for it to function? Thanks!

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[georgiadogs]

Whoops, here ya go---If you click on "Day 2," the slider will activate, but that tab won't be highlighted. However, if you click on it again, the tab will be highlighted.

http://nlloyd.zxq.net/coda-slider/

[Nile]

Remove the highlighted:

$("a").click(function(){
    $(".menu a.selected").removeClass("selected");   // remove previous class if there is any
    $(this).addClass("selected");                             // add class to the clicked link
    return false;                                                              // prevents browser from following clicked link
});

And then at the bottom of the bind function, add:

return false;

Here you can view the changed javascript: http://unlinkthis.net/examples/jquery.code.js

[georgiadogs]

Perfect, thanks! Can you give me a basic reason why that worked?

Thanks again for the help.

[Nile]

It worked because the bind function was already calling the onclick function. Its basically saying:

When you press a button do this:
  When you press the button again do this:
    Give the button a class

I don't know if that made sence - if it didn't I'd be happy to explain it differently.

[georgiadogs]

No I think I got it..it was weird adding in my own code to someone else's (considering I don't have much of a grasp on JS or jQuery). Thanks again!

[Nile]

Glad to help you! Your welcome!

It seems your topic is solved... Please set the status to resolved.. To do this:
Go to your first post ->
Edit your first post ->
Click "Go Advanced" ->
Then in the drop down next to the title, select "RESOLVED"