导航变动，怎样写呀？

Question

当鼠标移动到任意导航上会出现与其对应的图片，默认为第一个导航对应的图片且展开，请问怎样实现呢？个本人能力有限，望大家指教。最好有代码，嘿嘿~

Answer 1

用jQuery 的两个API  $.slideDown(滑动显示)  $.slideUp(滑动隐藏)
就可以实现这个效果

Answer 2

HTML部分我就不写了, 用li就可以var $li, now = 0;
$li = $("li");
$li.click(function(){
    var index = $(this).index();
    if (now != index){
        $li.eq(now).children("p").slideUp();
        $li.eq(index).children("p").slideDown();
        now = index;
    }
});

Answer 3

html<dl>
    <dt>sfsf</dt>
    <dd class='current'>jljlj</dd>
    <dt>sfsf</dt>
    <dd>jljlj</dd>
    <dt>sfsf</dt>
    <dd>jljlj</dd>
    <dt>sfsf</dt>
    <dd>jljlj</dd>
</dl>cssdl,dt,dd { margin:0; padding:0; }
dl dd { display:none; }
dl dd.current { display:block; }js$('dl dt').mouseover(function() {
    $(this).parent().find('dd').removeClass('current');
    $(this).next('dd').addClass('current');
});

Answer 4

LZ可以参照下面的代码<div id="title">标题</div>
<div id="image" sytle="display:none">图片</div>$("#title").bind("mouseenter", function() {
    $("#image").slideDown();
});
$("#title").bind("mouseleave", function() {
    $("#image").slideUp();
});