我們瀏覽一些網站時經常會遇見鼠標點擊某個選項時，該選項的樣式會發生變化，與此同時，頁面會呈現不同的內容或者樣式，這裏用到的知識點有：
1. HTML+CSS基礎；
2. JS庫—jQuery（綁定click事件、索引值、$(this)、jQuery樣式操作）。
注意：要在HTML文檔的頭部單獨嵌入script標籤，引入並加載jQuery庫，代碼如下：
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
代碼塊：
- HTML代碼段：
<body>
<div class="btns">
<input type="button" name="" value="選項一" class="current">
<input type="button" name="" value="選項二">
<input type="button" name="" value="選項三">
</div>
<div class="cons">
<div class='con'>你好呀！</div>
<div>見到你很高興！</div>
<div>一起學前端吧~</div>
</div>
</body>
- CSS代碼段：
<style type="text/css">
.btns input{
width:200px;
height:100px;
background-color: #bbb;
border:0;
}
.btns .current{
background-color: gold;
}
.cons div{
width:610px;
height:300px;
background-color: red;
line-height: 300px;
text-align: center;
font-size:40px;
display:none; /*隱藏*/
margin-top:10px;
}
.cons .con{
display:block;
}
</style>
- JavaScript代碼段：
<script type="text/javascript">
$(function(){
//獲取元素
var $btn = $('.btns input');
var $div = $('.cons div');
$btn.click(function(){
//this是原生的this ，指的是當前所點擊的對象，$(this)是jQuery對象
//addClass是駝峯式,.siblings()表示所選元素之外的剩餘同級元素
//當前點擊的按鈕加上current類選擇器的樣式，然後對剩餘的同級元素進行移除current樣式的操作
$(this).addClass('current').siblings().removeClass('current');
//用索引值index()來實現點擊哪個選項就呈現相應的內容 $(this).index()
$div.eq($(this).index()).addClass('con').siblings().removeClass('con');
})
})
效果圖如下：
