В этой статье описывается метод реализации вкладки JS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
1. Идеи
1. Получите элементы;
2. Добавить Onclick или EnmouseMove Event в элемент кнопки цикла;
3. При нажатии на текущую кнопку она будет отображаться в выделенном состоянии. Через FOR LOOP все стили кнопок установлены на пустые. Установите дисплей всех DOVS NONE.
4. Нажмите кнопку «Текущая кнопка», чтобы добавить стиль, отобразить текущий DIV и установите дисплей в блокировку.
2. HTML -код:
<div id="div1"> <input type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <input type="button" value="4"/> <div style="display:block;">11</div> <div>22</div> <div>33</div> <div>44</div></div>
3. CSS часть:
.Active {founal:#9CC;}. Div2 {ширина: 300px; высота: 200px; Граница: 1px #66666 Solid; дисплей: нет;}4. JS -код:
<script> window.onload = function () {var Odiv = document.getElementById ('div1'); // получить div var btn = Odiv.getElementsBytagName ('input'); // Получить вход var2 = ODIV.GetElementsBytagName ('div'); // get Div for (i = 0; btn [i] .index = i // btn [i]-кнопка i-й из указанной кнопки; Добавьте атрибут индекса в кнопку и установите значение индекса на i btn [i] .onclick = function () // Событие i-th chick кнопки {for (i = 0; i <btn.length; i ++) // Цикл Снимите стиль кнопки и скрыть див. div2 [i] .style.display = 'none' // скрыть div} this.classname = 'active' // добавить Active Div2 [this.index] .style.display = 'block' // this.index - это текущий div}}} </script>Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.