使用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>


用html+css+js实现选项卡切换效果

用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果:http://blog.csdn.net/tlonline/article...
  • klp098
  • klp098
  • 2016年03月29日 20:06
  • 1821

史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

下载地址:http://download.csdn.net/detail/cometwo/9393614html文件 CSS3外观漂亮淡入淡出Tab菜单演示 ...
  • cometwo
  • cometwo
  • 2016年01月06日 23:06
  • 6014

使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所...
  • qq_15096707
  • qq_15096707
  • 2016年01月29日 10:42
  • 2541

css做标签页选项卡js类(已有新版本,请停止该项下载)

  • 2007年09月24日 13:40
  • 4KB
  • 下载

不写js仅用css实现手风琴和选项卡效果

在10年前有一个软件叫qq,它的面板实现了一种推拉效果,后来有人命名为“手风琴”效果并在网页上通过js实现了这个效果,到今天这种效果依然在一些后台管理界面中存在着。还有一种效果,即window系统实现...
  • bingqingsuimeng
  • bingqingsuimeng
  • 2014年12月05日 11:38
  • 696

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

JS+CSS仿网易的选项卡TAB标签样式_网页代码站(www.6a8a.com) BODY { FONT-SIZE: 14px; } OL LI { MARGIN: 8px } #con { ...
  • Dracotianlong
  • Dracotianlong
  • 2012年08月03日 17:55
  • 5762

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

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

html+css+js实现选项卡效果

一开始想的是直接css+js写死,但是这样js和css、html就不能够很好的分隔开,而且拓展性很差。 如果是进行一个迭代的项目,后期需要修改选项卡时,就会比较麻烦,所以应该要思考如何能将html、...
  • jiasanwan
  • jiasanwan
  • 2016年08月11日 10:31
  • 209

HTML+CSS+JS实现选项卡

今天学习的时候写一个选项卡,献上代码和截图
  • cb2474600377
  • cb2474600377
  • 2015年03月04日 19:10
  • 447

HTML5+CSS3+JS 选项卡切换

先上效果图: 1、html页面: Tab切换 公告 规则 论坛 安全 公益 公告1 公告2 公告3 公告4...
  • LXFX1108
  • LXFX1108
  • 2015年11月30日 15:27
  • 345
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用css+js制作选项卡
举报原因:
原因补充:

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