search

Home  >  Article  >  Web Front-end  >  JS implements black style web page TAB tab effect code_javascript skills

JS implements black style web page TAB tab effect code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:37:061048browse

The example in this article describes the JS code to implement the black-style web page TAB tab effect. Share it with everyone for your reference. The details are as follows:

This is a webpage TAB tab JS code, black and cool style, you will like it after reading it, it is very familiar and classic style, it feels like déjà vu, I hope everyone likes it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/

The specific code is as follows: 

<!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&#63;"hover":"";
 con.style.display=i==cursel&#63;"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>

I hope this article will be helpful to everyone’s JavaScript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：javascript functional programming programmer's toolset_javascript skillsNext article：javascript functional programming programmer's toolset_javascript skills

Related articles

See more