tab点击切换 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				box-sizing: border-box;
			}
			
			#nav {
				height: 50px;
			}
			
			#nav a {
				display: block;
				height: 50px;
				line-height: 50px;
				padding: 0 15px;
				font-size: 18px;
				text-align: center;
				font-family: 'Microsoft YaHei';
				float: left;
				background- color: #e1e1e1;
				cursor: pointer;
			}
			
			#nav a.on {
				border-bottom: 2px solid #e60012;
			}
			
			#contentBox {
				width: 280px;
				height: 100px;
			}
			
			#contentBox .box {
				text-align: center;
				line-height: 100px;
				font-size: 24px;
				font-weight: blod;
				display: none;
			}
			
			#contentBox .box.active {
				display: block;
			}
		</style>
		<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
	</head>

	<body>
		<section>
			<nav id="nav">
				<a class="on">tab1</a>
				<a>tab2</a>
				<a>tab3</a>
				<a>tab4</a>
			</nav>
			<div id="contentBox">
				<div class="box active">内容一</div>
				<div class="box">内容二</div>
				<div class="box">内容三</div>
				<div class="box">内容四</div>
			</div>
		</section>

	</body>
	<script type="text/javascript">
		$(function() {
			$("#nav a").off("click").on("click", function() {
				var index = $(this).index();
				$(this).addClass("on").siblings().removeClass("on");
				$("#contentBox .box").eq(index).addClass("active").siblings().removeClass("active");
			});
		});
	</script>

</html>

 

posted @ 2018-11-23 11:06  webxy  阅读(436)  评论(0)    收藏  举报