First off, Klaus Hartl's approach is very gracefull, so I'd go with a
model like that.
This incorporates his code:
$('#menu li').hover(
function (){
$('#' + this.id.replace('link', 'div')).show();
},
function (){
$('div.page').hide();
}
);
<ul id="menu">
<li id="link1">Lorem ipsum dolor</li>
<li id="link2">Lorem ipsum dolor</li>
<li id="link3">Lorem ipsum dolor</li>
<li id="link4">Lorem ipsum dolor</li>
</ul>
<div id="div1" class="page">Div 1</div>
<div id="div2" class="page">Div 2</div>
<div id="div3" class="page">Div 3</div>
<div id="div4" class="page">Div 4</div>
On Feb 13, 12:28 am, "Sean Ronan \(Activepixels\)"
<[EMAIL PROTECTED]> wrote:
> Hi Jannik,
>
> How would your example be adapted to use mouseovers and then hide the div
> once the mouse is off either the li or the div.
>
> I posted a question earlier today "show/hide flyout menu panel" and it seems
> your approach gets me half way there.
>
> The application is a flyout menu - using divs to hold scrollable list items.
>
> Regards
> Sean
> sean ronan
> activepixels
> office : 01245 399 499
> email : [EMAIL PROTECTED]
> web : activepixels.co.uk
> Activepixels is a limited company registered in England and Wales.
> Registered number: 5081009.
> Registered office: Suite SF8, The Heybridge Business Centre, 110 The
> Causeway, Maldon, Essex, CM1 3TY.
>
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
> Behalf Of Jannik
> Sent: 12 February 2008 14:25
> To: jQuery (English)
> Subject: [jQuery] Re: controlling li-items with unique IDs and trigger
> corresponding DIVs
>
> Try this:
> $(document).ready(function (){
> $('div.page').hide();
> $('#menu li').click(function (){
> $('div.page').hide();
> $('#div'+$(this).attr('id')).show();
> });
> });
>
> <ul id="menu">
> <li id="link1">Lorem ipsum dolor</li>
> <li id="link2">Lorem ipsum dolor</li>
> <li id="link3">Lorem ipsum dolor</li>
> <li id="link4">Lorem ipsum dolor</li>
> </ul>
> <div id="divlink1" class="page">Div 1</div>
> <div id="divlink2" class="page">Div 2</div>
> <div id="divlink3" class="page">Div 3</div>
> <div id="divlink4" class="page">Div 4</div>
>
> On Feb 12, 2:37 pm, schnuck <[EMAIL PROTECTED]> wrote:
> > hi guys,
>
> > hope someone can give me a hint for this. if i had an unordered list
> > as shown below, where the li-items had unique IDs - is there any way
> > that we check which li-items has been clicked so depending on that, we
> > could show/animate a corresponding, unique DIV (each li-items would
> > have its own corresponding DIV)? these DIVs would be preloaded and
> > hidden via CSS somewhere on the page.
>
> > <ul>
> > <li id="link1">Lorem ipsum dolor</li>
> > <li id="link2">Lorem ipsum dolor</li>
> > <li id="link2">Lorem ipsum dolor</li>
> > <li id="link3">Lorem ipsum dolor</li>
> > <li id="link4">Lorem ipsum dolor</li>
> > </ul>
>
> > or do the li-items need to go into HREFs to accomplish this?
>
> > i know this might be very simply to solve, but i just can;t figure it
> > out. any help very appreciated.
>
> > many thanks.
