我们浏览一些网站时经常会遇见鼠标点击某个选项时，该选项的样式会发生变化，与此同时，页面会呈现不同的内容或者样式，这里用到的知识点有：
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');
})
})
效果图如下：
