As long as you have a one-to-one relationship between your links and
your divs, you don't need to worry about IDs or hrefs, etc. Just use
the index position:
<div id="links">
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
</div>
<div id="container">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
var links = $('#links a').click(function(){
$('div#container>div').hide().eq(links.index(this)).show();
return false;
});
On Mar 14, 7:21 pm, kevinm <sonicd...@gmail.com> wrote:
> Thank for the solutions.
>
> Yeah I almost went old school, for sanity. In the, before I saw this
> post I did something with filter and find. But I may use your's, Adam
> that is more streamlined. Will have to try and see what happens
>
> On Mar 14, 9:09 am, "Adam Jessop" <a...@infused-gaming.net> wrote:
>
> > Do something like:
>
> > <div id="links">
> > <a href="#firstDiv" id="first">first<a>
> > <a href="#secondDiv" id="second">second<a>
> > <a href="#thirdDiv" id="third">third<a>
> > </div>
>
> > <div id="container">
> > <div class="content">
> > <div id="firstDiv"></div>
> > <div id="secondDiv"></div>
> > <div id="thirdDiv"></div>
> > </div>
> > </div>
>
> > JS:
>
> > $(function(ev) {
>
> > $('#links a').click(function(ev){
> > $('#content div').hide();
> > id = $(this).attr('id');
> > $('#' + id + 'Div').show();
> > );
>
> > });
>
> > Untested but you get the idea :)
>
> > -----Original Message-----
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of Paul Hutson
> > Sent: 14 March 2009 11:44
> > To: jQuery (English)
> > Subject: [jQuery] Re: help with menu and show/hide divs
>
> > Kevin,
>
> > You could always go back to basics... i.e. the following (you'll have
> > to use your existing hide show code..) - and I know this isn't
> > elegant...
>
> > if (ClickedItem == "firstdiv")
> > {
> > ShowFirstDiv;
> > HideSecondDiv;
> > HideThirdDiv;
> > } elseif (ClickedItem == "firstdiv") {
> > HideFirstDiv;
> > ShowSecondDiv;
> > HideThirdDiv;
> > } else {
> > HideFirstDiv;
> > HideSecondDiv;
> > ShowThirdDiv;
> > };
>
> > Regards,
> > Paul
>
> > On Mar 14, 4:02 am, kevinm <sonicd...@gmail.com> wrote:
> > > I know I am doing something stupid , but can't figure it out.
>
> > > I have a menu of three items
>
> > > <a href="#firstDiv">first<a>
> > > <a href="#secondDiv">second<a>
> > > <a href="#thirdDiv">third<a>
>
> > > I then have 3 divs
>
> > > <div id="container">
> > > <div class="content">
> > > <div id="firstDiv></div>
> > > <div id="secondDiv></div>
> > > <div id="thirdDiv></div>
> > > </div>
> > > </div>
>
> > > the first div is shown by default, what I need to do is when menu
> > > items are clicked that the div shown (first,second,or third) is hidden
> > > and the selected div is shown. I am using the href to determine what
> > > div to show.
>
> > > I know this is an oft asked thing, but for the life of me I always end
> > > up with two divs showing instead of one.
>
> > > Thanks for any insight.
> > > Kevin
