jQuery工具:选项卡:将当前类添加到列表项?

时间:2012-01-03 16:01:37

标签: javascript jquery css jquery-tools

#1,

我正在通过Jquery Tools:Tabs系统使用Tabs,似乎无法弄清楚如何将CURRENT类添加到列表项中,而不是列表中的第一项而不将类应用于第一项和我扔的任何列表项目...任何想法?

http://flowplayer.org/tools/demos/tabs/index.html

非常感谢, 亚伦

编辑: 我没有jQuery工具的JavaScript / jQuery代码:Tabs系统...因为我从CDN调用它:

http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js

但是

这就是我在HTML中所拥有的。

<ul class="tabs">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
    <li><a href="#">Fifth</a></li>
  </ul>

如果我能更好地解释它,那就必须是这样的: jQuery选项卡系统将类(当前)添加到第一个选项卡,因此在我们的情况下默认为第一个List Item“FIRST”。我想要做的是将当前类添加到不同的列表项,例如“SECOND”。但这是我的问题所在,通过jQuery,我应该做什么来阻止默认情况下将类“current”添加到第一个列表项,所以我可以将“current”添加到另一个LIST ITEM,然后点击在其他LIST上,ITEM应用当前的类。

这有意义吗?对不起,如果没有默认的RAW jQuery文件,这有点难以解释。

再次感谢你, 亚伦

2 个答案:

答案 0 :(得分:1)

也许这就是你要找的东西:

$clickedTab.addClass('current').siblings('.current').removeClass('current');

<强>更新

根据您的修改,我认为您可能会发现本文档的这一部分很有用:http://flowplayer.org/tools/demos/tabs/anchors.html#second

我的上述代码只更改了标签的样式,它实际上不会打开您应用“当前”类的标签。如果上述链接证明对您没用,您可以尝试以下方法:

<强> HTML

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#first">Tab 1</a></li>
    <li><a href="#second">Tab 2</a></li>
    <li><a href="#third">Tab 3</a></li>
</ul>

<强> JS

$('.tabs a[href="#second"]').click();   // or use id's

将打开第二个标签并为您处理所有样式等。

答案 1 :(得分:1)

使用您提供的HTML和jquerytools中的代码(与您的问题相关联),我可以重现选项卡系统,而不会出现问题:

JSFiddle:http://jsfiddle.net/syG2Q/

可能需要更新到最新版本的JQuery。

如果情况并非如此,那么也许您可以在JSFiddle中为我们重现您的错误(请随意使用我作为一个工作示例)。

修改

好的,我相信我在阅读时会误解你的问题。

@nav将您链接到一些有用的文档:http://flowplayer.org/tools/demos/tabs/anchors.html#second

根据该文档,您需要为锚标记的href添加名称,然后相应地调用它:

<ul class="tabs">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
    <li><a href="#fourth">Fourth</a></li>
    <li><a href="#fifth">Fifth</a></li>
</ul>

在页面加载的javascript中:

location.hash = "second";

JSFiddle:http://jsfiddle.net/syG2Q/2/