Js实现选项卡

2016-05-16 为了生活
<无详细内容>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		background-color: #fff;
		font-family: "微软雅黑";
		font-size: 18px;
		width: 1000px;
		margin: 50px auto;
		color:#000000;
	}
	.wrapper{
		width: 350px;
	}
	#nav ul{
		border-bottom: 2px solid  yellowgreen;
		height: 32px;
	}
	#nav li{
		display: inline-block;
		border: 2px solid #999;
		border-bottom: none;
		margin-left: 10px;
		width: 65px;
		text-align: center;
		line-height: 30px;
	}
	#nav li:hover{
		cursor: pointer;
	}
	#content{
		display: block;
		border: 1px solid  blue;
		border-top: none;
		text-align: center;
		height: 100px;
		line-height: 100px;
	}
	#nav li.on{
		border-bottom: solid 2px #ffffff;
	}
	.hide{
		display: none;
	}
	.show{
		display: block;
	}
</style>
</head>
<script type="text/javascript">
	/*window.onload=change;  //js代码实现
	function change(){
	this.nav=document.getElementById("nav");
	this.li=nav.getElementsByTagName("li");
	this.cont=document.getElementById("content");
	this.divi=cont.getElementsByTagName("div");
	for(var i=0;i<li.length;i++){
		li[i].index=i;
		li[i].onclick=function(){
			for(var i=0;i<li.length;i++){
			li[i].className="";
			divi[i].className="hide";
			}
		li[this.index].className="on";
		divi[this.index].className="show";
		}
	}
}*/
$(function(){
$('#nav li').each(function(){
	$(this).click(function(){
		$('#nav li').removeClass("on");
		$(this).addClass("on");
		$("#content div").removeClass();
		$("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
	<div class="wrapper">
		<div id="nav">
			<ul>
				<li class="on">num1</li>
				<li>num2</li>
				<li>num3</li>
				<li>num4</li>
			</ul>
		</div><div id="content">
			<div class="show">content1</div>
			<div class="hide">content2</div>
			<div class="hide">content3</div>
			<div class="hide">content4</div>
		</div>
	</div>
</body>
</html>


用户评论
开源开发学习小组列表