Эта статья поделилась с вами кодом для реализации эффекта переключения вкладки в нативном JS для вашей ссылки. Конкретный контент заключается в следующем
1.html часть
<body> <div id="tab"> <div> <ul> <li><a href="#">Current Affairs</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Entertainment</a></li> </ul> </div> <div> <div>Current Affairs</div> <div>Sports</div> <div> развлечение </div> </div> </body>
2. CSS Часть: Есть много способов реализации этой части стиля. Это простая демонстрация, которую я написал, CSS, в котором я худший. <...
.tab_menu. Selected {фоновый цвет: #AAA;} .tab_menu ul {высота: 30px;} .tab_menu ul li {float: слева; Grey; Border-Bottom: None; Text-align: Center; Line-Height: 30px; Margin-Right: 3px;} .tab_menu ul li a {text-nect: none;} .tab_box {width: 170px; height: neply: nef at;3. Важная часть JS:
window.onload = function () {var otab = document.getElementById ('tab'); var ali = otab.getelementsbytagname ('li'); var otabbox = otab.getElementsbytagname ('div') [1]; var abox = otabbox.getelementsbytagname ('div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; ali [i] .onclick = function () {for (var j = 0; j <ali.length; j ++) {ali [j] .classname = ''; // Отмена стиля меню abox [j] .classname = 'hide'; // скрыть все Tabdivs} ali [this.index] .classname = 'selected' selected '; abox [this.index] .classname = ''; }}}Это просто и грубо, и не учитывает, есть ли у Табмену и Таббокс несколько стилей, и не адаптация к проекту - это просто способ мышления. Многие места должны быть улучшены. Следующее следует рассмотреть ситуацию, когда помечаются несколько классов, но, как правило, есть несколько классов. Теперь нам нужно использовать навыки для удаления определенного класса и добавить класс.
3.1 Добавить и удалить класс в Native JS.
window.onload = function () {var otab = document.getElementById ('tab'); var ali = otab.getelementsbytagname ('li'); var otabbox = otab.getElementsbytagname ('div') [1]; var abox = otabbox.getelementsbytagname ('div'); for (var i = 0; i <ali.length; i ++) {ali [i] .index = i; ali [i] .onclick = function () {for (var J = 0; j <ali.length; j ++) {var aclass = ali [j] .classname.split (''); // element.classnam z = 0; z <aclass.length; z ++) {if (aclass [z] == 'selected') {aclass.splice (z, 1); // Используйте метод сплайсинга массива для удаления найденного класса}} для (var k = 0; k <aclass1.length; k ++) {if (a aclass1 [k] = hide ') {aclass1). }} ali [j] .classname = aclass.join (''); // Все меню Удалите выбранный стиль abox [j] .classname+= 'hide'; // Все коробки скрывают abox [this.index] .classname = aclass1.join (''); // Текущий ящик показывает ali. стиль}}}}Личные тесты эффективны, но все они немного грязные в одном методе. Более того, когда есть много классов, эффективность также является проблемой, но в будущем не должно быть много классов. Эта функция очень проста в использовании jQuery.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.