jquery 选项卡切换

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>选项卡切换</title>
	     <link rel="stylesheet" href="css/test.css" />
		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
		<script type="text/javascript" src="js/test.js" ></script>
	</head>
	<body>
<div class="box">
<ul>
<li class="one">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div class="content">
<div class="ct">Practice makes perfect.熟能生巧. </div>
<div class="ct">.God helps those who help themselves.天助自助者. </div>
<div class="ct">All work and no play makes jack a dull boy.只工作不玩耍,聪明孩子也变傻. </div>



</div>

　　css

* { padding:0; margin:0;}
body { font-size:12px; padding:100px;}
ul { list-style-type:none;}
.box ul { height:30px; line-height:30px;}
.box ul li { float:left; padding:0 10px; position:relative; cursor:pointer; border:1px solid #000; margin-right:5px; border-bottom:none;}

.box ul li.two { background:#eee;}



.content { 325px; border:1px solid #000; padding:10px; height:100px;}

* html .content { margin-top:-1px;} //浏览器兼容iE6


.box ul li.one { 
	background-color: black;
	color:white ;
	}

$(document).ready(function(){
	
	$('.ct:gt(0)').hide();   //内容大于0的隐藏    gt(0) 大于0
	
	var bt = $('.box ul li');
	
	bt.hover(function(){
		
		$(this).addClass('two').siblings().removeClass('two');   //当前元素添加class 同级元素移除class
		});
       bt.click(function(){
		
		$(this).addClass('one').siblings().removeClass();
		
	//将标题的索引跟内容索引联系起来	
	var content_index = bt.index(this);
	
       //内容切换
	$('.ct').eq(bt.index(this)).show()
			.siblings().hide();
		
		
		
		});

	});

　　效果：

09:52:18 2017-09-24