[jQuery] pass different IDs to function?
Hi all. I'm very new at jQuery, and I've gotten myself stuck. I
have a set of menu tabs which should show/hide divs on the page, and
the active tab should change style. So far I have been able to write
the following, which does exactly what I want it to:
function divFlip()
{
$(".hiding").hide();
$("#div1").show();
$(".tabs").removeClass("highlight");
$("#1").addClass("highlight");
}
which I've called from an onclick in the tab. (I know that's not
recommended; I'll get to that.)
My problem has come in expanding that to affect all the tabs/divs. I
can't figure out how to put a variable ID into the thing, so that I
can have the function work on #div2/#2, #div3/#3, etc.
I have tried to do a click(function()) that sends (this).attr(id) as a
variable from the tab clicked on to the function as $("#div" +
variable), thus:
(".tabs").click( function(){
var number = $(this).attr("id");
$(".hiding").hide();
$("#div"+ number).show();
$(".tabs").removeClass("highlight");
$(this).addClass("highlight");
});
which *DID* work. However, when I changed over from using the
onclick to the click(fn), it no longer worked on the first click -- I
have to double-click on the tabs in order to trigger the show/hide
behavior. How can I:
a) make the click(fn) not need a double-click to work
or
b) modify the divFlip function called onclick to work for all tabs/
divs?
html below, stripped down to its bare-bones form for testing:
<div id="menu_tabs">
<ul id="tab_list">
<li id="1" class="tabs" onclick="divFlip1();">Div One</li>
<li id="2" class="tabs">Div Two</li>
<li id="3" class="tabs">Div Three</li>
</ul>
</div>
<div id="div1" class="hiding">
This is div 1
</div>
<div id="div2" class="hiding">
This is div 2
</div>
<div id="div3" class="hiding">
This is div 3
</div>