jQuery树状导航条·
虽然是在别人的帮助下完成的 但是我依然很有成就感,OE_YEAH
jQuery代码
CSS
HTML
jQuery代码
Code
$(document).ready(function(){
$(".subnav dd").css("display","none");
$(".subnav dt span").addClass("imgdt2");
$(".subnav dt span:first").removeClass("imgdt2");
$(".subnav dt span:first").addClass("imgdt1");
$(".subnav dd:first").css("display","block");
$(".subnav dt").click(function(){
$(".subnav dd").css("display","none");
$(this).next("dd").css("display","block");
$(".subnav dt span").removeClass();
$(".subnav dt span").addClass("imgdt2");
$(this).children("span").removeClass();
$(this).children("span").addClass("imgdt1");
});
$(document).ready(function(){
$(".subnav dd").css("display","none");
$(".subnav dt span").addClass("imgdt2");
$(".subnav dt span:first").removeClass("imgdt2");
$(".subnav dt span:first").addClass("imgdt1");
$(".subnav dd:first").css("display","block");
$(".subnav dt").click(function(){
$(".subnav dd").css("display","none");
$(this).next("dd").css("display","block");
$(".subnav dt span").removeClass();
$(".subnav dt span").addClass("imgdt2");
$(this).children("span").removeClass();
$(this).children("span").addClass("imgdt1");
});
CSS
Code
.subnav{border:1px solid #CDCDCD; border-top:none; display:block; margin:10px; line-height:24px;}
.subnav dt{ background:url(../images/subnavdt.jpg) repeat-x; height:29px; line-height:29px; font-weight:bolder;
color:#417AA3; padding-left:14px; display:block; cursor:pointer;}
.subnav dt a{color:#417AA3;}
.subnav dt .imgdt1{float:right; margin:10px 15px; background:url(../images/show.gif) no-repeat; width:9px; height:8px;}
.subnav dt .imgdt2{float:right; margin:10px 15px; background:url(../images/hidden.gif) no-repeat; width:9px; height:8px;}
.subnav dd{ clear:both;}
.subnav dd ul li{background:url(../images/subnavdd.gif) no-repeat left center; margin-left:15px; padding-left:15px;}
.subnav a{color:#000000;}
.subnav{border:1px solid #CDCDCD; border-top:none; display:block; margin:10px; line-height:24px;}
.subnav dt{ background:url(../images/subnavdt.jpg) repeat-x; height:29px; line-height:29px; font-weight:bolder;
color:#417AA3; padding-left:14px; display:block; cursor:pointer;}
.subnav dt a{color:#417AA3;}
.subnav dt .imgdt1{float:right; margin:10px 15px; background:url(../images/show.gif) no-repeat; width:9px; height:8px;}
.subnav dt .imgdt2{float:right; margin:10px 15px; background:url(../images/hidden.gif) no-repeat; width:9px; height:8px;}
.subnav dd{ clear:both;}
.subnav dd ul li{background:url(../images/subnavdd.gif) no-repeat left center; margin-left:15px; padding-left:15px;}
.subnav a{color:#000000;}
HTML
Code
<dl class="subnav">
<dt><span></span><a href="#" target="_blank">头部</a></dt>
<dd style="display:block;">
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">颈部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">腰部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">腹部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">胸部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
</dl>
<dl class="subnav">
<dt><span></span><a href="#" target="_blank">头部</a></dt>
<dd style="display:block;">
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">颈部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">腰部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">腹部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
<dt><span></span><a href="#" target="_blank">胸部</a></dt>
<dd>
<ul>
<li><a href="#" target="_blank">鼻</a></li>
<li><a href="#" target="_blank">耳</a></li>
<li><a href="#" target="_blank">喉</a></li>
<li><a href="#" target="_blank">眼</a></li>
</ul>
</dd>
</dl>