javascript的列表切换【实现代码】_javascript技巧

思路：

1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i;

2、匹配index为将要显示的DOM对象

3、点击过程中要切换class，先判断是否含有指定class，有就删除，没有就添加指定class。注:if(!null)为真.

4、onmouseover同理

HTML

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的列表切换【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。