这是jQuery的正确使用吗？

我用html/css创建了一个标签式显示。我只是想使用jQuery来切换选项卡/类。它完美的工作，但我想确保我正确使用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重复为每个标签。

来源

2009-10-14 Mike

你应该在定义选项卡中的行为用一个更通用的方法：

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

有了这个代码，就可以添加其他标签页也不会需要添加新的JavaScript代码。 a标签的id属性中的信息用于确定要显示的内容面板。

来源

2009-10-14 13:27:28

您不需要重复每个选项卡的代码。相反，编写一个适用于所有选项卡的函数（使用jQuery选择查找父节点和子节点），并将该单一函数绑定到制表符的点击处理程序（您需要一个新类来标识哪些元素是制表符）。

来源

2009-10-14 13:24:04

jQuery看起来不错，但是你可以推广它以使用n个选项卡。

此外，为非活动选项卡添加类可能是多余的，就好像选项卡没有活动类一样，则可以将其视为非活动类。

来源

2009-10-14 13:24:26

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

我宁愿去一般的解决方案。为所有选项卡使用“选项卡”类，为此写一个点击处理程序。使用$（this）引用被点击的内容。

来源

2009-10-14 13:25:40

并使用href =“＃yourTab”（这使得链接到页面顶部更有意义） – Quentin

你在正确的轨道上我不会为每个标签点击推荐编码命令。 JQuery UI有一个标签功能http://jqueryui.com/demos/tabs/，可以给你一些想法或使用。

来源

2009-10-14 13:26:51

您应该可以编写一个函数，可以为每个选项卡调用该函数。或者，你可以做这样的事情：

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

来源

2009-10-14 13:26:58

，或者你可以只使用tabs功能jQuery UI：

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

来源

2009-10-14 13:27:29 Marius

也可能是检查出toggle效果非常有用。

来源

2009-10-14 13:50:15 aland

这是jQuery的正确使用吗？

回答

相关问题