Это правильное использование jQuery?

Question

Я создал вкладку с html/css. Я просто хочу использовать jQuery для переключения вкладок/классов. Он работает отлично, но я хочу убедиться, что я правильно использую jQuery.

Вот HTML структура + JQuery:

<ul id="tabs"> 
<li><a href="#" id="tab1" class="activetab">Tab1</a></li> 
<li><a href="#" id="tab2">Tab2</a></li> 
</ul> 

<div id="tabcontent"> 
<div id="tab1content"> 
This is tab 1 content 
</div> 
<div id="tab2content"> 
This is tab 2 content 
</div> 

$("#tab1").click(function() { 
      $("#tabcontent > div").hide(); 
      $("#tab1content").show(); 
      $("#tabs > li a").removeClass().addClass("inactivetab"); 
      $("#tab1").removeClass().addClass("activetab"); 
     }); 

JQuery вы видите tab1 повторяется для каждой вкладки.

Answer 1

Вы должны использовать более общий подход в определении поведения для вкладок:

$('#tabs a').click(function(){ 
    $("#tabcontent > div").hide(); 
    $("#"+this.id+"content").show(); 
    $("#tabs > li a").removeClass().addClass("inactivetab"); 
    $(this).removeClass().addClass("activetab"); 
}); 

С помощью этого кода можно добавить другие вкладки без необходимость добавления нового кода JavaScript. Информация в атрибуте id тега используется для определения отображаемой панели содержимого.

Answer 2

Вам не нужно повторять код для каждой вкладки. Вместо этого напишите одну функцию, которая применима ко всем вкладкам (поиск родительского и дочернего узлов с использованием jQuery) и привяжите эту единицу к обработчикам кликов для вкладок (для идентификации элементов, которые являются вкладками, вам понадобится новый класс).

Answer 3

jQuery выглядит нормально, но вы можете обобщить его для работы с n количеством вкладок.

Кроме того, добавление класса для неактивных вкладок, вероятно, избыточно, как если бы вкладка не имела активного класса, тогда ее можно считать неактивной.

Answer 4

The jQuery you see for tab1 is repeated for each tab. 

Я предпочел бы пойти с общим решением. Используйте класс «tab» для всех вкладок, напишите для этого обработчик кликов. Используйте $ (this) для ссылки на то, что было нажато.

Answer 5

Вы на правильном пути Я бы не рекомендовал команды кодирования для каждого щелчка на вкладке. Пользовательский интерфейс JQuery имеет вкладку http://jqueryui.com/demos/tabs/, которая может дать вам некоторые идеи или для использования.

Answer 6

Вы должны иметь возможность написать одну функцию, которую можно вызвать для каждой вкладки. Или, вы можете сделать что-то вроде этого:

$("#tab1, #tab2").click(function() { 
    var tab = $(this); 
    var tabContent = $('#' + tab.attr('id') + 'content'); 
    // etc. 
}); 

Answer 7

или вы могли бы просто использовать функцию tabs в jQuery UI:

$("#tabs").tabs(); 

Answer 8

также может быть полезно, чтобы проверить toggle эффект.