特效"/>
树形菜单特效
主体内容(body):
<body>
<b><img src="images/jnxl6-1-fold.gif" />树形菜单：</b>
<ul>
<a href="#"><img src="images/jnxl6-1-fclose.gif" />文学艺术</a>
</ul>
<ul id="0" class="no_circle">
<li><img src="images/jnxl6-1-doc.gif" />先锋写作</li>
<li><img src="images/jnxl6-1-doc.gif" />小说散文</li>
<li><img src="images/jnxl6-1-doc.gif" />诗风词韵</li>
</ul>
<ul>
<a href="#"><img src="images/jnxl6-1-fclose.gif" />贴图专区</a>
</ul>
<ul id="1" class="no_circle">
<li><img src="images/jnxl6-1-doc.gif" />真我风采</li>
<li><img src="images/jnxl6-1-doc.gif" />视频贴图</li>
<li><img src="images/jnxl6-1-doc.gif" />行行摄摄</li>
<li><img src="images/jnxl6-1-doc.gif" />Flash贴图</li>
</ul>
<ul>
<a href="#"><img src="images/jnxl6-1-fclose.gif" />房产论坛</a>
</ul>
<ul id="2" class="no_circle">
<li><img src="images/jnxl6-1-doc.gif" />我要买房</li>
<li><img src="images/jnxl6-1-doc.gif" />楼市话题</li>
<li><img src="images/jnxl6-1-doc.gif" />我要卖房</li>
<li><img src="images/jnxl6-1-doc.gif" />租房心语</li>
<li><img src="images/jnxl6-1-doc.gif" />二手市场</li>
</ul>
<ul>
<a href="#"><img src="images/jnxl6-1-fclose.gif" />娱乐八卦</a>
</ul>
<ul id="3" class="no_circle">
<li><img src="images/jnxl6-1-doc.gif" />红楼一梦</li>
<li><img src="images/jnxl6-1-doc.gif" />笑话论坛</li>
<li><img src="images/jnxl6-1-doc.gif" />休闲生活</li>
<li><img src="images/jnxl6-1-doc.gif" />大话春秋</li>
</ul>
</body>
CSS部分内容：
body {font-size:13px;
line-height:20px;
}
a {font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
}
.no_circle{list-style:none;
display:none;
}
JAVAscript部分内容：
<script>
window.onload = function () {
var dj = document.getElementsByTagName("a"); //获取a标签对象的集合
//遍历a对象
for (var i = 0; i < dj.length; i++) {
dj[i].num = i;
dj[i].onclick = xyx; //当点击a标签的的时候执行xyx
}
function xyx() {
var djl = document.getElementById(this.num);
//判断a标签下一级的内容是否为隐藏
if (djl.style.display == "none") {
djl.style.display = "block";
} else {
djl.style.display = "none";
}
}
};
</script>
效果图：
更多推荐
树形菜单特效
发布评论