jQuery在选定选项卡上添加类答案

【问题标题】：jQuery Adding Class on Selected TabjQuery在选定选项卡上添加类
【发布时间】：2011-09-15 18:59:37
【问题描述】：

我是 jQuery 的初学者，我正在尝试修改脚本。脚本演示是here。现在，他们在所选选项卡上方添加了一行，这是我不想要的。我想要做的只是像

一样向锚添加一个类

<a class="tab active" href="#">Tab Name</a>

这样我就可以使用 CSS 来更改活动按钮的背景颜色或其他内容。

当你点击一个标签时，下面的代码是他们当前所拥有的。

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.hasClass('.active')) return false;

    $(this).addClass('active')

【问题讨论】：

标签： javascript jquery append

【解决方案1】：

the_tabs.click(function(e){
    var element = $(this);
    if( element.hasClass('active') ) {
        return false;
    }
    else {   
        the_tabs.removeClass('active'); 
        element.addClass('active');
    }
}

【讨论】：

不客气，有时间请标记为已回答:-)

【解决方案2】：

你只需要：

 $(this).addClass('nameOfYourClass')

为点击的对象添加一个类

【讨论】：

其实我想我明白了！除非它一旦点击就永远不会消失。单击关闭时如何删除它？用我目前的代码更新了我的代码。

【解决方案3】：

而不是

if(element.find('.active').length) return false;

使用

if(element.hasClass('.active')) return false;

或者您必须使用.filter 而不是.find，find 正在尝试查找具有类 .active 但.filter 过滤出集合以查找匹配的 css-selecotr 的子节点

【讨论】：

谢谢。那么如果点击离开，我应该把删除类的功能放在哪里？我现在唯一的问题是，当我单击一个选项卡时，它会变为活动状态，但是当我单击下一个选项卡时，另一个会保持活动状态，所以现在它们都处于活动状态。它一直在继续。
确定 the_tabs.not(this).removeClass(".active") 应该这样做吗？如果 the_tabs 是你所有的标签

【解决方案4】：

试试这个：

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.hasClass('active')) return false;

    /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    var bg = element.attr('class').replace('tab ','');

    $('ul.tabContainer .active').removeClass('active');
    element.addClass('active');

    /* Checking whether the AJAX fetched page has been cached: */

    if(!element.data('cache'))
    {   
        /* If no cache is present, show the gif preloader and run an AJAX request: */
        $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

        $.get(element.data('page'),function(msg){
            $('#contentHolder').html(msg);

            /* After page was received, add it to the cache for the current hyperlink: */
            element.data('cache',msg);
        });
    }
    else $('#contentHolder').html(element.data('cache'));

    e.preventDefault();
})

还可以查看我的博客（网站）以获取一些不错的 jQuery 指南。 :)

【讨论】：