使用css+js制作选项卡

选项卡制作




<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 480px;
height: 500px;
margin: 100px auto;
text-align: center;
}
ul{
list-style: none;
}
a:link {
color: red;
text-decoration: none;
} /* 未被访问的链接 */
a:visited {
color: blue;
} /* 已被访问的链接 */
a:hover {
color: yellow;
} /* 鼠标指针移动到链接上 */
a:active {
color: fuchsia;
} /* 正在被点击的链接 */
#head ul li {
float: left;
height: 40px;
line-height: 40px;
width: 150px;
background: #cfc;
margin-right: 5px;
margin-left: 5px; 
}
.info{
clear: both;
border: 10px solid #faa;
display: none;
}
#news{
display: block;
}
</style>
<script type="text/javascript">
function show(id,id2){
document.getElementById("news").style.display = "none";
document.getElementById("reserach").style.display = "none";
document.getElementById("media").style.display = "none";
document.getElementById("reserach").style.display = "none";
document.getElementById("media").style.display = "none";
document.getElementById(id).style.display = "block";
document.getElementById("n").style.background = "#aaf";
document.getElementById("r").style.background = "#aaf";
document.getElementById("m").style.background = "#aaf";
document.getElementById(id2).style.background = "#fcf";
}
</script>
</head>
<body>
<div id="box">
<div id="head">
<ul>
<li id="n" onmouseover="show('news','n')">新闻</li>
<li id="r" onmouseover="show('reserach','r')">科研</li>
<li id="m" onmouseover="show('media','m')">媒体</li>
</ul>
</div>
<div id="news" class="info">
<ul>
<li><a href="">$111111111111111111111111111111111111111111111111111$</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
<li><a href="">11111111111111111111111111111111111111111111111111111</a></li>
</ul>
</div>

<div id="reserach" class="info">
<ul>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
<li><a href="">2222222222222222222222222222222222222222222222222222</a></li>
</ul>
</div>

<div id="media" class="info">
<ul>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
<li><a href="">3333333333333333333333333333333333333333333333333333</a></li>
</ul>
</div>


</div>
</body>

</html>


阅读更多
个人分类: js CSS
上一篇使用struts的Ajax支持
下一篇使用css+js制作水平菜单
想对作者说点什么? 我来说一句

CSS+JS常用网页选项卡打包

2008年11月07日 411KB 下载

tab选项卡效果

2012年05月18日 79KB 下载

没有更多推荐了,返回首页

关闭
关闭