Thank you all for the help! I'm still working on deciphering my way
though mkmanning's suggestion (told ya I was very new at this) but I
did get Liam's to work, and I'm continuing to try simplifying the
code. I really appreciate the help!!
Laura
On Aug 19, 5:11 pm, mkmanning <michaell...@gmail.com> wrote:
> Numeric ID's aren't valid, and also an ID can't start with a number.
>
> I'd also recommend removing the inline onclick; you can simplify the
> code by just adding a click event on the UL and delegating:
>
> $('#tab_list').click(function(e){
> e = $(e.target), i = $(this).find('li').removeClass
> ('highlight').index(e);
> e.addClass('highlight');
> $($('.hiding').hide()[i]).show();
>
> });
>
> There are several ways to achieve what you want, HTH.
>
> On Aug 19, 5:35 am, Liam Byrne <l...@onsight.ie> wrote:
>
> > Did you wrap the tab click function in a document.ready, so that the
> > tabs were there to apply the function to ?
>
> > $(document).ready(function() {
> > $(".tabs").click( function(){
> > var number = $(this).attr("id");
> > $(".hiding").hide();
> > $("#div"+ number).show();
> > $(".tabs").removeClass("highlight");
> > $(this).addClass("highlight");
> > });
>
> > });
>
> > Try an alert in the above to see what it's trying to show.
>
> > I'm also not 100% certain on the advisability of having numeric-only ids ?
>
> > L
>
> > Laura 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>
> > > ------------------------------------------------------------------------
>
> > > No virus found in this incoming message.
> > > Checked by AVG -www.avg.com
> > > Version: 8.5.409 / Virus Database: 270.13.61/2313 - Release Date:
> > > 08/19/09 06:03:00
