javascript实现列表切换效果.pdfVIP

这篇文章主要为大家详细介绍了 javascript 实现列表切换效果的相关资料 ,需要的朋友可 以参考下 IE 兼容性没处理，确切的说不太会，还望指点一二 思路： 1、js 获取要给定点击事件的按钮组对象，如 btns=document.xxx(), 遍历过程绑定事件之 前先取得当前对象的下标 eg:btns[i].index=i; 2、匹配 index 为将要显示的 DOM 对象 3、点击过程中要切换 class，先判断是否含有指定 class，有就删除，没有就添加指定 class。注 :if(!null) 为真 . 4、onmouseover 同理 HTML: lt;!DOCTYPE htmlgt; lt;html lang=engt; lt;headgt; nbsp; lt;meta charset=UTF-8gt; nbsp; lt;titlegt;Titlelt;/titlegt; nbsp; lt;link rel=stylesheet href=css/index.cssgt; nbsp; lt;script src=js/index-banner.jsgt;lt;/scriptgt; lt;/headgt; lt;bodygt; nbsp; lt;h3gt;javascript 切换效果 lt;/h3gt; nbsp; lt;sectiongt; nbsp; nbsp; lt;div class=baner_parentgt; nbsp; nbsp; nbsp; lt;div class=will_left btn_leftgt; nbsp; nbsp; nbsp; nbsp; lt;ulgt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;li data-i=0 class=selected js_btngt;lt;img src=img/Ferrari.pnggt;lt;spangt; 法拉利 lt;/spangt;lt;/ligt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;li data-i=1 class=js_btngt;lt;img src=img/Mercedes1.pnggt;lt;spangt; 奔驰 lt;/spangt;lt;/ligt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;li data-i=2 class=js_btngt;lt;img src=img/BMW.pnggt;lt;spangt; 宝马 lt;/spangt;lt;/ligt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;li data-i=3 class=js_btngt;lt;img src=img/Audi.pnggt;lt;spangt; 奥迪 lt;/spangt;lt;/ligt; nbsp; nbsp; nbsp; nbsp; lt;/ulgt; nbsp; nbsp; nbsp; lt;/divgt; nbsp; nbsp; nbsp; lt;div class=will_left banner_rightgt; nbsp; nbsp; nbsp; nbsp; lt;!-- 法拉利 --gt; nbsp; nbsp; nbsp; nbsp; lt;div class=banner_listsgt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;img src=img/ferrari01.jpg alt=gt; nbsp; nbsp; nbsp; nbsp; nbsp; lt;ulgt; nbsp; nbsp;