jQuery 在选定选项卡上添加类

发布于 2024-12-05 05:28:19 字数 620 浏览 0 评论 0原文

我是 jQuery 的初学者，我正在尝试修改脚本。脚本演示位于此处。现在，他们在所选选项卡上方添加了一行，这是我不想要的。我想做的只是向锚点添加一个类，这样

<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')

原文

I am a beginner with jQuery and I am trying to modify a script. The script demo is here. Right now, they add a line above the selected tab, which I don't want. What I want to do is just add a class to the anchor like a

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

that way I can just use CSS to change the background color or something for the active buttons.

The code below is what they currently have for when you click on a tab.

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')

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一张白纸 2024-12-12 05:28:20

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

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

回复收藏 0 原文

等待圉鍢 2024-12-12 05:28:20

您只需要：

 $(this).addClass('nameOfYourClass')

向单击的对象添加一个类

You just need:

 $(this).addClass('nameOfYourClass')

to add a class to the clicked object

回复收藏 0 原文

趁年轻赶紧闹 2024-12-12 05:28:20

而不是

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

use

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

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

instead of

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

use

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

or you have to use .filter instead of .find, find is trying to find a child node that has the class .active but .filter filters out the collection to find the matching css-selecotr

回复收藏 0 原文

枫林﹌晚霞¤ 2024-12-12 05:28:20

试试这个：

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 指南。 :)

Try this:

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();
})

Also check my blog (website) for some nice jQuery guides. :)

回复收藏 0 原文

~没有更多了~