Dom编程(有子菜单的导航条 和 选项卡)

本文介绍如何使用HTML和JavaScript实现选项卡切换效果及带有子菜单的导航栏功能,详细展示了代码结构与交互逻辑。

选项卡:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tab</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

#tab{
	width:312px;
	margin:100px auto;
}

#tab ul{
	list-style:none;
}

#tabControl{
	border-top:solid 2px #206f96;
	width:310px;
	display:table;
}

#tabControl span{
	display:table-cell;
	text-align:center;
	font:14px/30px "宋体";
	height:29px;
	line-height:29px;
}

.info{
	color:#666;
	font-size:14px;
	line-height:30px;
}

#s1{
	border-left:1px solid #CFCFCF;
	border-right:1px solid #CFCFCF;
}

#s2{
	background-image:url(1.jpg);
	background-repeat:repeat-x;
	border-right:1px solid #CFCFCF;
	border-bottom:1px solid #CFCFCF;
}

#s3{
	background-image:url(1.jpg);
	background-repeat:repeat-x;
	border-right:1px solid #CFCFCF;
	border-bottom:1px solid #CFCFCF;
}

#info2{
	display:none;
}

#info3{
	display:none;
}
</style>

<script type="text/javascript">
function listXinWen(){
	document.getElementById("s1").style.background = "none";
	document.getElementById("s1").style.borderBottom = "none";
	document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("info1").style.display = "block";
	document.getElementById("info2").style.display = "none";
	document.getElementById("info3").style.display = "none";
}

function listTuPian(){
	document.getElementById("s2").style.background = "none";
	document.getElementById("s2").style.borderBottom = "none";
	document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s3").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s3").style.borderBottom = "1px solid #CFCFCF";

	document.getElementById("info2").style.display = "block";
	document.getElementById("info1").style.display = "none";
	document.getElementById("info3").style.display = "none";
}

function listJunShi(){
	document.getElementById("s3").style.background = "none";
	document.getElementById("s3").style.borderBottom = "none";
	document.getElementById("s2").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s2").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("s1").style.background = "url(1.jpg) repeat-x";
	document.getElementById("s1").style.borderBottom = "1px solid #CFCFCF";
	document.getElementById("info3").style.display = "block";
	document.getElementById("info2").style.display = "none";
	document.getElementById("info1").style.display = "none";
}
</script>
</head>

<body>
<div id="tab">

<div id="tabControl">
<span id="s1" onmouseover="listXinWen()">新闻</span>
<span id="s2" onmouseover="listTuPian()">图片</span>
<span id="s3" onmouseover="listJunShi()">军事</span>
</div>

<div id="info1" class="info">
<ul>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
<li>新闻新闻新闻新闻新闻新闻新闻新闻</li>
</ul>
</div>

<div id="info2" class="info">
<ul>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
<li>图片图片图片图片图片图片图片图片</li>
</ul>
</div>

<div id="info3" class="info">
<ul>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
<li>军事军事军事军事军事军事军事军事</li>
</ul>
</div>

</div>
</body>
</html>

效果:




有子菜单的导航:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>navbar</title>
<script type="text/javascript">
function xianshi1(){
	document.getElementById("cd1").style.display = "block";
}

function yincang1(){
	document.getElementById("cd1").style.display = "none";
}

function xianshi2(){
	document.getElementById("cd2").style.display = "block";
}

function yincang2(){
	document.getElementById("cd2").style.display = "none";
}
</script>

<style type="text/css">
*{
	margin:0;
	padding:0;
}
#caidan{
	width:800px;
	margin:50px auto 5px;
	background-color:#CCC;
	height:35px;
}
#caidan ul{
	list-style:none;
}
#caidan ul li.mu{
	width:100px;
	margin-right:10px;
	background-color:#FC0;
	float:left;
	height:35px;
	text-align:center;
	line-height:35px;
	position:relative;
}
#cd1{
	width:150px;
	position:absolute;
	padding-top:5px;
	display:none;
}
#cd1 ul{
	list-style:none;
}
.zi{
	background-color:#3C0;
}

#cd2{
	width:120px;
	position:absolute;
	padding-top:5px;
	display:none;
}
#cd2 ul{
	list-style:none;
}

#content{
	width:800px;
	background:#FFC;
	margin:0 auto;
}
</style>
</head>

<body>
<div id="caidan">
<ul>
    <li class="mu" onmouseover="xianshi1()" onmouseout="yincang1()">
        <a href="#">菜单项目</a>
        <div id="cd1">
        	<div class="zi">
            <ul>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            </ul>
           </div>
        </div>
    </li>
    <li class="mu" onmouseover="xianshi2()" onmouseout="yincang2()">
        <a href="#">菜单项目</a>
        <div id="cd2">
        	<div class="zi">
            <ul>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            <li><a href="#">子菜单项目</a></li>
            </ul>
           </div>
        </div>
    </li>
    <li class="mu"><a href="#">菜单项目</a></li>
    <li class="mu"><a href="#">菜单项目</a></li>
    <li class="mu"><a href="#">菜单项目</a></li>
</ul>
</div>

<div id="content">
爱我中华爱我中华爱我中华爱我中华爱我中华爱我中华
</div>
</body>
</html>

效果:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值