點擊,不同的tab_menu,顯示不同的tab_box
注意點:
1.獲取ul下,當前li的編號. $(‘div ul li’).index(this)
2.顯示ul下編號為$index的li -> $(‘ul li’).eq($index)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tab{border:1px solid black;border-radius: 10px;padding: 15px;width: 230px;
}
.hide{display: none;
}
.selected{background: #ffa
}
li{display: inline-block;border-left: 1px solid black;padding: 5px;
}
li:hover{cursor: pointer;
}
.tab_box{padding: 5px;border: 1px solid black;border-radius: 5px;width: 200px;height: 100px;
}
</style>
</head>
<body><div class="tab"><div class="tab_menu"><ul><li class="selected">時事</li><li >體育</li><li >娛樂</li></ul></div><div class="tab_box"><div>時事</div><div class="hide">體育</div><div class="hide">娛樂</div></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){$('div.tab_menu li').click(function(){$(this).addClass('selected').siblings().removeClass("selected")let $index = $('div.tab ul li').index(this)$('div.tab_box >div').eq($index).show().siblings().hide()})
})</script></body>
</html>
參考《鋒利的jQuery》(第2版)P166~P167
)
![P2634 [國家集訓隊]聰聰可可](http://pic.xiahunao.cn/P2634 [國家集訓隊]聰聰可可)
