JS实现黑色风格的网页TAB选项卡效果代码
更新时间：2015年10月09日 11:10:40 作者：企鹅
这篇文章主要介绍了JS实现黑色风格的网页TAB选项卡效果代码,通过简单的页面元素遍历控制页面tab切换效果,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码。分享给大家供大家参考。具体如下：
这是一款网页TAB选项卡JS代码，黑色超酷的风格，看了后你会喜欢的，很熟悉很经典的风格，似曾相识的感觉，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/
具体代码如下：
<!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>
<script type="text/jscript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
list-style:none;
}
.main{
width:306px;
height:299px;
float:left;
margin:300px;
display:inline;
background:#000;
padding:3px;
}
.main .menu{
width:306px;
height:31px;
overflow:hidden;
float:left;
}
.main .menu span{
width:60px;
height:30px;
line-height:30px;
overflow:hidden;
text-align:center;
float:left;
margin:1px 0 0 1px;
background:#333;
color:#BCBCBC;
font-weight:bold;
cursor:pointer;
font-size:12px;
}
.main .menu .hover{
background:#666;
color:#FFF;
}
.main .content{
width:304px;
height:266px;
overflow:hidden;
float:left;
margin:1px;
margin-top:0px;
display:inline;
background:#333333;
}
.main .content div{
width:304px;
height:266px;
line-height:266px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
background:#666;
}
</style>
</head>
<body>
<div class="main">
<div class="menu">
<span id="one1" onclick="setTab('one',1,5)" class="hover">菜单一</span>
<span id="one2" onclick="setTab('one',2,5)">菜单二</span>
<span id="one3" onclick="setTab('one',3,5)">菜单三</span>
<span id="one4" onclick="setTab('one',4,5)">菜单四</span>
<span id="one5" onclick="setTab('one',5,5)">菜单五</span>
</div>
<div class="content">
<div id="con_one_1">内容一</div>
<div id="con_one_2" style="display:none">内容二</div>
<div id="con_one_3" style="display:none">内容三</div>
<div id="con_one_4" style="display:none">内容四</div>
<div id="con_one_5" style="display:none">内容五</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了javascript面向对象三大特征之继承,简单描述了继承的概念、原理,并结合实例形式详细分析了继承的常见实现方法与操作注意事项,需要的朋友可以参考下2019-07-07
layui结合form,table的全选、反选v1.0示例讲解
今天小编就为大家分享一篇layui结合form,table的全选、反选v1.0示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字,下面为大家介绍下其具体的使用2014-08-08
找出字符串中出现次数最多的字母和出现次数精简版,有需求的朋友可以参考下2012-11-11
这篇文章主要介绍了Javascript文本框脚本实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这篇文章为大家详细主要介绍了js实现带箭头的进度流程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
js 表格排序(编辑+拖拽+缩放)实现代码，需要的朋友可以参考下。2010-05-05
Ajax::prototype 源码解读...2007-01-01
这篇文章主要介绍了javascript闭包功能与用法,结合具体实例形式深入浅出的分析了javascript中闭包的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要分析了javascript单线程异步io回调的特性这个问题，希望我们整理的内容能帮助到你。2017-12-12
最新评论