Question

有一个简单的问题，使用jquery，我如何创建一个菜单，左边的链接和右边的内容，例如，如果我悬停链接与rel =“link1”，内容div在应该显示右边的id =“link1”，当我悬停另一个链接与rel =“link2”时，将显示id =“link2”的内容div，但如果我点击其中一个链接，其内容div应该保持显示，即使我徘徊另一个链接:)我希望我很清楚解释，这是我的简单模板练习：

<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样式：

#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; }

和biiiig感谢那些可以花些时间帮助我的人，我真的很赞赏它！

Answer 1

这样的东西？：

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();
});

根据链接依赖悬停隐藏/显示某个div

1 个答案: