选项卡一级二级横向

最新推荐文章于 2021-05-25 20:50:30 发布

shirleylz

最新推荐文章于 2021-05-25 20:50:30 发布

阅读量772

点赞数

分类专栏： html/css javascript 文章标签： javascript url class function xhtml float

本文链接：https://blog.csdn.net/liuzheng2684/article/details/6434438

版权

html/css javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

.....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>【荐】JS+CSS全力打造的一级横向滑动，二级竖向下拉综合菜单_网页代码站(www.webdm.cn)</title>

<!--

body,ul,ol,li,dl,dt,dd,h1{ margin:0; padding:0; list-style:none;}

body { font:12px "Arial","宋体";color:#333;background:#FFF;}

a{border:none; text-decoration:none;}

#menu { width:980px; margin:30px auto;}

#menu dl { padding-left:10px; height:60px;overflow:hidden; }

#menu dl dd { float:left; padding-right:5px; height:60px; width:60px;}

#menu dl dd a {display:block; padding-left:10px; height:60px; width:60px;}

#menu dl dd a:hover,

#menu dl dd.ok a { background-position: 0 -90px;}

#menu dl dd a:hover span,

#menu ol {clear:both; height:30px;}

#menu ol li { float:left;}

#menu ol li a { color:#FFF; display:block; width:70px; text-align:center; height:30px; line-height:32px; overflow:hidden; background:#0099FF;}

#menu ol li a:hover,

#menu ol li.ok a,

.no,.ol span { display:none;}

-->

</style>

<!--//

function ShowMenu(obj,n){

var dd = obj.parentNode.getElementsByTagName("dd");

for(var i=0;i<dd.length;i++){dd[i].className = "";}

dd[n].className = "ok";

var ol = document.getElementById("menu").getElementsByTagName("ol");

for(var i=0;i<ol.length;i++){ol[i].className = "no";}

ol[n].className = "";

}

//菜单A-0的事件

function ShowSpan(obj,n){

// var span =obj.parentNode.getElementsByTagName("a");

var span=obj.childNodes[0].firstChild.nodeValue;//获得当前节点上的值

alert(span);

for(var i=0;i<span.length;i++){span[i].className = "no";}

span[n].className = "";

var li = obj.parentNode.getElementsByTagName("li")

li[n].className = "ok";

for(var i=0;i<li.length;i++){

if(i!=n){li[i].className = "";}

li[i].onmouseout = function(){this.className = "ol";}

}

//-->

</script>

</head>

<body>

<dl>

</dl>

<ol>

</li>

</li>

</li>

</li>

</li>

</li>

</ol>

</li>

</li>

</li>

</li>

</li>

</li>

</ol>

</li>

</li>

</li>

</li>

</li>

</li>

</ol>

</div>

<br />

<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p>

</body>

</html>

....

shirleylz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡一级二级横向

<br /><br />.....<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>【荐】JS+CSS全力打造的一级横向滑动，二级竖向下拉综合菜单_网页代码站(
复制链接

扫一扫