つまり、互換性が処理されていません、正確にする方法がわかりません、私はいくつかのアドバイスをしたいと思っています
アイデア：
1。JSボタングループオブジェクトを取得して、BTNS = document.xxx（）などのクリックイベントを提供します。イベントを通過する前に、現在のオブジェクトのインデックスを取得します：btns [i] .index = i;
2。表示されるDOMオブジェクトとしてインデックスを一致させる
3。クリックプロセス中に、クラスを切り替えて、最初に指定されたクラスが含まれているかどうかを判断する必要があります。ある場合は、削除します。ある場合は、指定されたクラスを追加します。注：（！null）がtrueの場合。
4。オンマウスオーバー
HTML
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title> <link rel = "styleSheet" href = "css/index.css"> <script src = "js/index-banner.js <セクション> <div> <ul> <li data-i = "0"> <img src = "img/ferrari.png"> <span> ferrari </span> </li> <li data-i = "1"> <img src = "img/mercedes1.png" "> <span> </li> < src = "img/bmw.png"> <span> bmw </span> </li> <li data-i = "3"> <img src = "img/audi.png"> <span> audi </span> </li> </div> <div> <！ - フェラーリ - > <li> ferrari1 </li> <li> ferrari2 </li> <li> ferrari3 </li> <li> ferrari4 </li> </ul> </div> <！ - mercedes-> <div> <img src = "img/benchi01.jpg" "> <ul> <ul> <li> <ul> <li>メルセデスベンツ3 </li> <li>メルセデスベンツ4 </li> </ul> </div> < <li> bm-4 </li> </ul> </div> <！ - audi-> <div> <img src = "img/aodi01.jpg"> <ul> <li> audi2 </li> <li> audi3 </li> <li> audi4 </div </ul </ul> </ul> </ul> </div> </section> </body> </html>
CSS
*{リストスタイル：なし;国境：なし;テキスト装置：なし;マージン：0;パディング：0;ボックスサイズ：border-box;} h3 {text-align：center;色：dimgrey;}。baner_parent {width：1000px;マージン：0 auto;}。will_left {float：left;}。will_right{float：right;}。幅：160px;高さ：98px;バックグラウンドカラー：darkgrey;パディング：13px 0;カーソル：ポインター; -Webkit-Transition：すべての.5Sが断念されます。 -moz-transition：すべての.5sが簡単です。 -O-Transition：すべての.5Sが簡単です。 -ms-transition：すべての.5sが簡単です。トランジション：すべて.5sが簡単;}。btn_left ul li.selected {background-color：cornflowerblue;}。btn_leftul li：not（：nth-child（4））{border-bottom：1px solid dimgrey;}。高さ：50px;}。btn_left ul li span {display：block;}。banner_light、.banner_lists img {width：800px;高さ：391px;位置：相対;}。banner_lists {position：absolute;高さ：391px;}。banner_lists：not（：nth-child（1））{display：none;}。banner_lists ul {overflow：hidden;位置：絶対;下：0;左：0;}。btn {height：33px;幅：200px;国境右：1pxソリッド＃000;マージントップ：-3px;テキストアライグ：センター;ラインハイト：33px;バックグラウンドカラー：darkgrey;不透明：.8;カーソル：ポインター; -Webkit-Transition：すべての.5Sが断念されます。 -moz-transition：すべての.5sが簡単です。 -O-Transition：すべての.5Sが簡単です。 -ms-transition：すべての.5sが簡単です。トランジション：すべての.5s easeest;}。btn：hover、.btn.selected {background-color：cornflowerblue;}JS
/** * 2016/4/30 0030に管理者によって作成されました。 ['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 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.length; i ++）{btns [i] .index = i; btns [i] .onclick = showitems; } // classNameスイッチ、指定されたクラス関数hasclass（elem、cls）{return elem.classname.match（new regexp（ '（// s |^）'+cls+'（// s | $）'））が含まれていますか？ } //指定されたクラス関数AddClass（Elem、Cls）{if（！hasclass（elem、cls））{elem.classname+= ""+cls; }} //指定されたクラス関数RemoveClass（Elem、cls）{if（hasclass（elem、cls））{var reg = new regexp（ '（// s |^）'+cls+'（// s | $）'）; ELEM.CLASSNAME = ELEM.CLASSNAME.REPLACE（reg、 ""）; }} // classNameスイッチ、すべての関数removeall（obj）{for（var i = 0; i <obj.length; i ++）{removeclass（obj [i]、 "selected"）; }} // divディスプレイスイッチング関数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）; } //トグルボタン効果関数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] .onmouseover = function（）{removeall（hoverbtns）; addclass（this、 "selected"）; var imgsrc = array [sum] [this.index]; img.src = array [sum] [this.index]; }}} //デフォルトでは、Willhover（0）;}を切り替えることができます。上記のJavaScriptリストの切り替え[実装コード]は、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。