サマリー：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>tab-JQ</title> <style> *
<!DOCTYPE html>
<html>
<head>
<meta charset="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: 28px; line-height: 28px; 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;}
.xhx{border-bottom: 2px solid blue; }
</style>
<script src='https://code.jquery.com/jquery-3.1.0.js'></script>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select xhx">標題1</span>
<span>標題2</span>
<span>標題3</span>
</div>
<ul id="con">
<li>內容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 xhx').siblings().removeClass('select xhx');
$('#con li').eq(i).show().siblings().hide();
});
</script>
</body>
</html>
添削の先生：查無此人添削時間：2019-04-16 09:53:17
先生のまとめ：完成的不錯。html5和css決定頁面是否漂亮，美感。繼續(xù)加油。