树形二级导航文字带图片隐藏效果

很多朋友在设计网站的时候需要用到JS特效，比如一个文字和图片切换的树形导航，又比如在有限的版面里显示更多的内容，当鼠标移动到一个导航的时候显示一个内容，其他的全部隐藏，移动到另外一个导航的时候显示相对应的内容，其他的也隐藏，因此这种效果就要用到JS的隐藏效果，利用JS控件来触动每一个DIV，实现调用不同的CSS样式，然后达到当前CSS显示，其他的隐藏的效果。

今天为制作一个类似的案例，给大家做个参考，无论是横排还是竖排的都可以试用这种效果，经过测试原先试用的是LI来排版，但是发现在IE6和IE7里不是很兼容，因此每个文字导航现在改用DIV排版，如果大家发现LI的解决方法，可以提供参考。

点击图片查看演示效果：

 

    点击下载源文件

    制作原理：通过JS来触控不同的导航，实现导航下面的图片隐藏和显示。部分重要代码如下

function g(o){  
    return document.getElementById(o);  
}  
function setTab(name,cursel,n){  
    for(i=1;i<=n;i++){  
        var menu=document.getElementById(name+i);  
        var con=document.getElementById("con_"+name+"_"+i);  
        menu.className=i==cursel?"now":"jbli";  
        con.style.display=i==cursel?"block":"none";  
    }  
} 

    部分CSS代码：控制样式

.jibing{ width:228px;overflow:hidden; font-size:14px; margin:0px auto}  
.jiblist{ border:1px solid #CCCCCC}  
.jiblist a{ color:#333333; text-decoration:none}  
.jiblist .jbli{ background:url(images/jbg.jpg) no-repeat; width:193px; height:38px;  
 padding-left:33px; color:#333333; font-size:14px; font-weight:bold; line-height:38px; list-style-type:none;}  
.jiblist .now{ background:url(images/jbg.jpg) no-repeat; width:193px;  
 height:38px; padding-left:33px; color:#333333; font-size:14px; font-weight:bold; line-height:38px; list-style-type:none;}  
.jiblist .now a{ color:#FF0000}  
.jiblist .pic{padding:0px; padding-left:1px; width:224px; height:75px;} 
 

效果预览 本地下载