Home>

This is a web page tab tab js code, black cool style,You will like it after watching it,Very familiar with the classic style,The feeling of acquaintanceHope you like it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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 switch</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>
 <div>
  <span onclick="settab (" one ", 1,5)">Menu one</span>
  <span onclick="settab (" one ", 2,5)">Menu two</span>
  <span onclick="settab (" one ", 3,5)">Menu Three</span>
  <span onclick="settab (" one ", 4,5)">Menu Four</span>
  <span onclick="settab (" one ", 5,5)">Menu five</span>
 </div>
 <div>
  <div>content one</div>
  <div>Content two</div>
  <div>content three</div>
  <div>Content IV</div>
  <div>Content five</div>
 </div>
</div>
</body>
</html>
  • Previous How ASPNET calls the WebService service at regular intervals
  • Next Android implementation method to obtain signature and public key