Question

got an easy question, using jquery, how do i create a menu, with links on the left and with content on the right, for example, if i hover the link with rel=”link1″, the content div on the right with id=”link1″ should be displayed, and when i hover another link with rel=”link2″, the content div with id=”link2″ will be displayed, BUT if i click one of the link, its content div should stay displayed, even if i hover another link 🙂 i hope i was clear in explaining, here is my simple template to practice:

<div id="ref_menu">
    <a href="javascript://" class="ref_link" rel="link1">
        Link 1
    </a>
    <a href="javascript://" class="ref_link" rel="link2">
        Link 2
    </a>
</div>
<div id="ref_content">
    <div class="ref_text" id="link1">
        text1
    </div>
    <div class="ref_text" id="link1">
        text2
    </div>
</div>

css styles:

#ref_menu { width:250px; text-align:right; position:absolute; left:0; }
#ref_menu a { display:block; padding-right:10px; font-family:trebuchet ms; position:relative; font-style:italic; color:#0097c4; font-size:11pt; line-height:30px; letter-spacing:1px; border-bottom:1px solid #0097c4; }
#ref_menu a:hover { color:red; border-bottom:1px solid red; }
#ref_content { position:absolute; left:270px; }
#ref_content div { display:none; position:absolute; top:0; }

and biiiig thanks to those who can spare some time with helping me, i really apreciate it!

Answer 1

Something like that?:

http://jsfiddle.net/37urb/

$('a').hover(function(e){
    if($('.stayDisplayed').length == 0){
        var id = $(this).attr('rel');
        $('#'+id).show();
    }
},function(e){
    if($('.stayDisplayed').length == 0){
        var id = $(this).attr('rel');
        $('#'+id).hide();
    }
});

$('a').click(function(e){
    var id = $(this).attr('rel');

    $('.ref_text').removeClass('stayDisplayed');
    $('.ref_text').hide();
    $('#'+id).addClass('stayDisplayed');
    $('#'+id).show();
});