HI,var preId = null;
function divFlip(Id)
{
$("#"+preId).hide();
$("#"+id).show();
preId = Id;
$(".tabs").removeClass("highlight");
$("#1").addClass("highlight");
}
<div id="menu_tabs">
<ul id="tab_list">
<li id="1" class="tabs" onclick="divFlip1('1');">Div
One</li>
<li id="2" class="tabs" onclick="divFlip1('2');">Div
Two</li>
<li id="3" class="tabs" onclick="divFlip1('3');">Div
Three</li>
</ul>
</div>
try out this, now u have two id i.e. new id by as a parameter & another one
is in global var.
hope this is you want :)
cheers.
On Wed, Aug 19, 2009 at 3:33 AM, Laura <laura.whea...@gmail.com> wrote:
>
> 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">
> <p> This is div 1</p>
> </div>
> <div id="div2" class="hiding">
> <p> This is div 2 </p>
> </div>
> <div id="div3" class="hiding">
> <p> This is div 3 </p>
> </div>
>
--
Regard
Mohammad.Tareque
