关闭

使用css+js制作选项卡

409人阅读 评论(0) 收藏 举报
分类:

选项卡制作




<!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>


2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:16717次
    • 积分:414
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:1篇
    • 译文:0篇
    • 评论:4条
    文章分类
    最新评论