tab頁切換（僅用於記錄）
阿新 • • 發佈：2020-12-01
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>tab-JQ</title>
<style>
* {margin: 0; padding: 0; list-style: none;}
#wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}
#tit {height: 30px;width: 600px;}
#tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}#con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}
#tit span.select {background: red; color: #ccc;}
#con li.show {display: block;}
</style>
<scriptsrc='js/jquery-3.1.0.min.js'></script>
</head>
<body>
<divid="wrap">
<divid="tit">
<spanclass="select">標題1</span>
<span>標題2</span>
<span>標題3</span>
</div>
<ulid="con">
<liclass="show">內容111</li>
<li>內容222</li>
<li>內容333</li>
</ul>
</div>
<script>
$('#tit span').click(function() {var i = $(this).index();//下標第一種寫法
//var i = $('tit').index(this);//下標第二種寫法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
</script>
</body>
</html>