时间：2021-07-01 10:21:17 帮助过：5人阅读
思路：
1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;
2、匹配index为将要显示的DOM对象
3、点击过程中要切换class，先判断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真.
4、onmouseover同理
HTML
Title
CSS
*{
list-style: none;
border:none;
text-decoration: none;
margin:0;
padding:0;
box-sizing: border-box;
}
h3{
text-align: center;
color: dimgrey;
}
.baner_parent{
width: 1000px;
margin:0 auto;
}
.will_left{
float: left;
}
.will_right{
float: right;
}
.btn_left ul li{
text-align: center;
width: 160px;
height:98px;
background-color: darkgrey;
padding: 13px 0;
cursor: pointer;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.btn_left ul li.selected{
background-color: cornflowerblue;
}
.btn_left ul li:not(:nth-child(4)){
border-bottom: 1px solid dimgrey;
}
.btn_left ul li img{
width: 50px;
height: 50px;
}
.btn_left ul li span{
display:block;
}
.banner_right,.banner_lists img{
width: 800px;
height: 391px;
position: relative;
}
.banner_lists{
position: absolute;
height: 391px;
}
.banner_lists:not(:nth-child(1)){
display: none;
}
.banner_lists ul{
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
}
.btn{
height: 33px;
width: 200px;
border-right: 1px solid #000;
margin-top: -3px;
text-align: center;
line-height: 33px;
background-color: darkgrey;
opacity: .8;
cursor: pointer;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
-ms-transition:all .5s ease-out;
transition:all .5s ease-out;
}
.btn:hover,.btn.selected{
background-color: cornflowerblue;
}
JS
以上这篇javascript的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。