使用css+js制作选项卡

原创 2015年11月21日 16:17:13

选项卡制作




<!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实现选项卡

  • 2010-12-20 13:25
  • 44KB
  • 下载

【自我作业】JS+CSS tab选项卡

调了一个上午才发现问题:this.className = " tabOn";我不小心写错漏了一个空格变成this.className = "tabOn";导致js失效了。粗心是罪恶根源,而没有仔细分析...

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

  • 2010-03-08 16:48
  • 411KB
  • 下载

js+css实现tab页选项卡

  • 2015-02-13 02:04
  • 36KB
  • 下载

JS+CSS仿网易的选项卡TAB标签样式-导航菜单类

JS+CSS仿网易的选项卡TAB标签样式_网页代码站(www.6a8a.com) BODY { FONT-SIZE: 14px; } OL LI { MARGIN: 8px } #con { ...

CSS+JS选项卡效果

js+css形成的选项卡效果

  • 2008-02-21 12:36
  • 17KB
  • 下载

初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果

了解到Javaweb的开发过程中一般都会涉及到前端的内容,所以这两天在网上找了一些前端的教程,对HTML、CSS和JavaScript有了一些基本的认识,这是自己尝试着写的一个小东西,全当练手了。功能...

div+css js选项卡

转自:http://zisetoufa.iteye.com/blog/966512     DIV+CSS选项卡演示-爱JavaScript中文网 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)