tab标签选项卡jquery简洁实现
2019-09-26 本文已影响0人
easy_code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签选项卡jquery简洁实现</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{font-size:12px;color:#666;text-align:left;}
h1{text-align:center;}
.tabbox{width:500px;height:200px;margin:100px auto;background:#f0f0f0;font-family:'微软雅黑';}
.tabbox .tab-head{overflow:hidden;background:#ccc;}
.tabbox .tab-head a{display:block;padding:10px 20px;float:left;text-decoration:none;color:#333;}
.tabbox .tab-head a:hover{background:#E64E3F;color:#fff;text-decoration:none;}
.tabbox .tab-head a.on{background:#E64E3F;color:#fff;}
.tabbox .tab-con{overflow:hidden;padding:10px;}
.tabbox .tab-con li{display:none;}
.tabbox .tab-con li:first-child{display:block;}
</style>
</head>
<body>
<div class="tabbox">
<div class="tab-head">
<a href="javascript:;" class="on">tab1</a>
<a href="javascript:;">tab2</a>
<a href="javascript:;">tab3</a>
<a href="javascript:;">tab4</a>
</div>
<ul class="tab-con">
<li><p>tab1内容1</p></li>
<li><p>tab1内容2</p></li>
<li><p>tab1内容3</p></li>
<li><p>tab1内容4</p></li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$(".tabbox .tab-head a").click(function(){
$(this).addClass('on').siblings().removeClass('on');
var index = $(this).index();
$('.tabbox .tab-con li:eq('+index+')').show().siblings().hide();
});
});
</script>
</body>
</html>
