ajax 切换列表,javascript实现列表切换效果

IE兼容性没处理，确切的说不太会，还望指点一二

思路：

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

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

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

4、onmouseover同理

HTML

Title

javascript切换效果

• 法拉利
• 奔驰
• 宝马
• 奥迪

• 法拉利1
• 法拉利2
• 法拉利3
• 法拉利4

• 奔驰1
• 奔驰2
• 奔驰3
• 奔驰4

• 宝马1
• 宝马2
• 宝马3
• 宝马4

• 奥迪1
• 奥迪2
• 奥迪3
• 奥迪4

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

/**

* Created by Administrator on 2016/4/30 0030.

* blog:wjf444128852.github.io

* 不支持IE

*/

window.οnlοad=function(){

var arrFR = ['img/ferrari01.jpg','img/ferrari02.jpg','img/ferrari03.jpg','img/ferrari04.jpg'];

var arrBC = ['img/benchi01.jpg','img/benchi02.jpg','img/benchi03.jpg','img/benchi04.jpg'];

var arrBM = ['img/baoma01.jpg','img/baoma02.jpg','img/baoma03.jpg','img/baoma04.jpg'];

var arrAD = ['img/aodi01.jpg','img/aodi02.jpg','img/aodi03.jpg','img/aodi04.jpg'];

var array = [arrFR,arrBC,arrBM,arrAD];

var btns=document.getElementsByClassName('js_btn');

var divList=document.getElementsByClassName('banner_lists');

// 品牌切换

for(var i=0;i

btns[i].index=i;

btns[i].οnclick=showItems;

}

//ClassName切换,是否含有指定class

function hasClass(elem,cls){

return elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));

}

// 没有就追加指定class

function addClass(elem,cls){

if(!hasClass(elem,cls)){

elem.className+=" "+cls;

}

}

// 有就移除指定class

function removeClass(elem,cls){

if(hasClass(elem,cls)){

var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');

elem.className=elem.className.replace(reg,"");

}

}

//ClassName切换,移除所有

function removeAll(obj){

for (var i = 0; i < obj.length; i++) {

removeClass(obj[i],"selected");

}

}

// DIV显示切换

function showItems(){

removeAll(btns);

addClass(this,"selected");

for (var s = 0; s< divList.length; s++) {

divList[s].style.display="none";

divList[this.index].style.display="block";

}

willHover(this.index);

}

// 右边切换按钮效果

function willHover(sum){

var hoverbtns=divList[sum].getElementsByClassName('btn');

var img=divList[sum].getElementsByTagName('img')[0];

for (var i = 0; i < hoverbtns.length; i++) {

hoverbtns[i].index=i;

hoverbtns[i].οnmοuseοver=function(){

removeAll(hoverbtns);

addClass(this,"selected");

var imgSrc=array[sum][this.index];

img.src=array[sum][this.index];

}

}

}

// 默认第一次可以切换

willHover(0);

};

以上就是本文的全部内容，希望对大家的学习有所帮助。