`
ayaya
  • 浏览: 450082 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript css的tab效果

CSSJavaScriptCC++C# 
阅读更多 
<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="760" 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">
	   <table width="760" 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="content3" class="content" style="display:none">
   <div class="contentHeader">Tab-C</div>
   <div class="contentMain">
	   <table width="760" 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>
</body>
</html>
分享到：
| javascript表单元素回车自动切换
评论
1 楼 freedomstyle 2010-01-29  
  不错学习了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics