javascript css的tab成效-HTML教程-爱易网页

javascript css的tab成效

日期：2014-05-17　浏览次数：20669 次

javascript css的tab效果
http://ayaya.iteye.com/blog/149936

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
a {
  color:#000000;
  text-decoration:none;
}
   
#header {
  float:left;
  width:760px;
  background:#D3D3D3;
  font-size:12px;
  line-height:normal;
}
#header ul {
  margin:0;
  padding:0px;
  list-style:none;
}
#header li {
 float:left;
 background:#DCE1EF;
 border:solid 1px #8EA2C2;
 margin-left:2px;
 padding:0px;
}
#header a {
 display:block;
 padding:5px 15px 4px;
}
#header .current {
 background:#FFFFFF;
 border-left:solid 1px #8EA2C2;
 border-top:solid 1px #8EA2C2;
 border-right:solid 1px #8EA2C2;
 border-bottom:solid 0px #8EA2C2;
 
}
#header .current a{
 padding-bottom:5px;
}
.content {
  margin-top:2px;
  width:760px;
}
.content .contentHeader {
  background-color:#BCC7E0;
  border:solid 1px #4B66A5;
  font-weight:bold;
  height:24px;
}

.content .contentMain {
 border-left:solid 1px #4B66A5;
 border-top:solid 0px #4B66A5;
 border-right:solid 1px #4B66A5;
 border-bottom:solid 1px #4B66A5;
 height:400px;
}

tr {
	background-color:expression((this.sectionRowIndex%2==0)?"#945643":"#fff")
}
</style>
<script type="text/javascript">
function change_option(number,index){
 for (var i = 1; i <= number; i++) {
      document.getElementById('current' + i).className = '';
      document.getElementById('content' + i).style.display = 'none';
 }
  document.getElementById('current' + index).className = 'current';
  document.getElementById('content' + index).style.display = 'block';
}


var varclk=null;
	var oldcolor=null;
	function change1(vartr)
	{
		if(varclk!=null)
		{
			varclk.style.backgroundColor=oldcolor;
			varclk.style.color="black";
		}
		oldcolor=vartr.style.backgroundColor;
		vartr.style.backgroundColor='#456';
		vartr.style.color="white";
		varclk=vartr;
	}
</script>
<title>Tab Test</title>
</head>

<body>
<div id="navbar">
 <div id="header">
  <ul>
    <li id="current1"><a href="#" onclick="change_option(3,1);">Tab-A</a></li>
    <li id="current2"><a href="#" onclick="change_option(3,2);">Tab-B</a></li>
    <li id="current3"><a href="#" onclick="change_option(3,3);">Tab-C</a></li>
  </ul>
 </div>
 <div id="content1" class="content">
   <div class="contentHeader">Tab-A</div>
   <div class="contentMain">
	   <table width="750" border="0">
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>d</td>
		    <td>e</td>
		  </tr>
		  <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		    <tr onClick="change1(this)">
		    <td>a</td>
		    <td>b</td>
		    <td>c</td>
		    <td>e</td>
		    <td>d</td>
		  </tr>
		</table>	
   </div>
 </div>
 <div id="content2" class="content" style="display:none">
   <div class="contentHeader">Tab-B</div>
   <div class="contentMain">
	   第二个选项卡
   	</div>
 </div>
 <div id="content3" class="content" style="display:none">
   <div class="contentHeader">Tab-C</div>
   <div class="contentMain">
	   第三个选项卡
	</div>
 </div>
</div>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

javascript css的tab成效

相关资料更多>

推荐阅读更多>