jQuery - addClass 或 removeClass - 有附加类吗？答案

【问题标题】：jQuery - addClass or removeClass - Is there an append class?jQuery - addClass 或 removeClass - 有附加类吗？
【发布时间】：2010-03-11 17:02:42
【问题描述】：

我将 css 悬停在标签的图像上，当我点击图像 HOW 时，我试图让课程从 .how 更改为 .how_on。

我的标签是

如何 |什么 |何时 |世界卫生组织 |为什么

我为每个 (.how, .how_on)、(.what, .what_on) 等都有课程......

我可以让 jQuery 使用 click(function(){}) 将 _on 添加到原始类名中吗？ ?

HTML：

<div id="tab_container">
     <ul class="tabs">
        <li><a class="how_on" href="#how">How</a></li>
        <li><a class="why" href="#why">Why</a></li>
        <li><a class="what" href="#what">What</a></li>
        <li><a class="who" href="#who">Who</a></li>
        <li><a class="when" href="#when">When</a></li>
    </ul>
    <p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p>
</div>
<div class="tab_body">
    <!-- HOW -->
        <div id="how" class="tab">
            <strong>HOW IT WORKS:</strong>
        </div>

JQUERY：

<script type="text/javascript">
jQuery(document).ready(function(){
 //if this is not the first tab, hide it
 jQuery(".tab:not(:first)").hide();
 //to fix u know who
 jQuery(".tab:first").show();
 //when we click one of the tabs
 jQuery(".tabs a").click(function(){
 //get the ID of the element we need to show
 stringref = jQuery(this).attr("href").split('#')[1];




 // adjust css on tabs to show active tab





 //hide the tabs that doesn't match the ID
 jQuery('.tab:not(#'+stringref+')').hide();
 //fix
 if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
 jQuery('.tab#' + stringref).show();
 }
 else
 //display our tab fading it in
 jQuery('.tab#' + stringref).fadeIn();
 //stay with me
 return false;
 });

});
</script>

CSS：

.tabs
{
    width: 683px;
    height: 29px;
    padding: 0;
    margin: 0;
    display: inline;
    float: left;
    overflow: hidden;
    list-style-type: none;
}

.tabs li
{
    margin: 0;
    padding: 0;
    display: inline;
    float: left;
}

.tabs  a {  background-position: 0 -58px;}
.tabs .on a {   background-position: 0 -29px;}

.how,
a.how:link,
a.how:visited
{
  float: left;
  display: inline;
  width: 135px;
  height: 29px;
  margin: 0;
  text-decoration: none;
  text-indent: -99999px;
  overflow: hidden;  
  background-image: url("../images/how_tab.jpg");
}

【问题讨论】：

标签： jquery css tabs addclass removeclass

【解决方案1】：

当你使用addClass 时，它会添加/附加一个类，除非你先使用removeClass 删除一些类，所以你可以这样做：

$('.how_on').mouseover(function(){
    $(this).removeClass('class_name').addClass('class_name');
});

$('.why').mouseover(function(){
    $(this).removeClass('class_name').addClass('class_name');
});

// and so on.........

【讨论】：

虽然有点令人困惑，但 OP 询问的是不是如何添加额外的类，而是如何通过附加一些额外的文本来修改元素上的现有类。示例：“what”将更改为“what_on”。 Pointy 的解决方案（删除然后添加新类）应该可以工作。
@Peter，同意，但我已经在我的回答中提到了这件事。谢谢

【解决方案2】：

我希望 jQuery 确实有，但据我所知没有。您始终可以使用removeClass 删除一个版本并使用addClass 添加另一个版本。或者，您可以制作自己的小插件。似乎是一件有用的事情；甚至 jQuery UI 也必须处理它的所有类（“ui-state-default”、“ui-state-hover”等），如果它可以调用 API 来更新类干“ui”会更容易-state-" 带有选定的后缀。

因此，在您的情况下，简单的 jQuery 方法将类似于：

// to go from "foo" to "foo_on":
function turnOn(which) {
  $('.tabs').find('a.' + which)
    .removeClass(which)
    .addClass(which + '_on');
};

// to go from "foo_on" to "foo"
function turnOff(which) {
  $('.tabs').find('a.' + which + '_on')
    .removeClass(which + '_on')
    .addClass(which);
}

然后，当您希望“how”选项卡切换到“how_on”类时调用turnOn("how")，然后调用turnOff("how")使其从“how_on”切换到“how”。

【讨论】：

是的，我只是希望我对 jQuery 有更多的了解，以便让我更轻松，哈哈。但是我只想在选定的选项卡上添加一个“_on”，这将使图像上的背景定位发生变化并解决我的问题。是不是类似于 jQuery('.tab#' + stringref).addClass('_on') ？这显然也不起作用。有什么额外的帮助吗？
这也没有用.. jQuery('.tab#' + stringref).addClass('.tab#' + stringreg + '_on');
那是因为你做错了:-) 就像我说的，jQuery 没有提供直接的方法来做到这一点。我会更新我的答案。

【解决方案3】：

更新：

试试这个：

$('.tabs a').click(function() {
    $('.tabs a').removeAttr('id'); // remove all ids
    $(this).attr('id', this.className + "_on") // create how_on as this id.
});

您正在使用类名来创建唯一 ID。它会完成你正在尝试做的同样的事情。这是一个选择了“为什么”的示例。

 <ul class="tabs">
    <li><a class="how" href="#how">How</a></li>
    <li><a id='why_on' class="why" href="#why">Why</a></li>
    <li><a class="what" href="#what">What</a></li>
    <li><a class="who" href="#who">Who</a></li>
    <li><a class="when" href="#when">When</a></li>
 </ul>

当然，最简单的方法是添加 .how_on 类并同时拥有这两个类。

<div class='how how_on'>some stuff</div>

这没有错，您可以轻松地覆盖样式或定位元素。

.how { color: #000; }
div.how_on { color: #F00; } /* increased specificity */

如果您想确保它覆盖它，请增加特异性。

【讨论】：

老实说，我认为对我来说最好的方法是这个： var oldClass = $(element).className(); $(element).removeClass(oldClass).addClass(oldClass + '_on');但是..我试过了，但运气并不好。我是这方面的初学者，所以我需要一秒钟才能掌握它。 :)
是的，我想不到那个代码。 className 将获取名称，但它将返回所有名称。你真的必须问问自己你想要完成什么。如果只是 CSS 样式，我建议您尝试最简单的方法并使用样式覆盖。
是的，我同意，但我并不想改变数据的容器，只是 li a img。我将用更多的 CSS 更新顶部，让您更好地了解我的 li a css。不过，我真的很感谢所有的帮助，谢谢。
已更新。这应该可以工作，使用很少的代码并且应该相当快。不过，我建议您将标签容器设为 ID，因为它们的遍历速度更快。
效果很好，非常感谢。我只需要添加“id="how_on"”，以便在页面加载时选择原始选项卡，但其他一切都完美无缺。

【解决方案4】：

.addClass( function(index, class) )

addClass 采用匿名函数，您可以在此处添加附加类的逻辑

喜欢

$('ELEMENT SELECTION').addClass(function() {
  return $(this).attr("class") + 'CLASS TO BE ADDED';
});

【讨论】：

很高兴知道这一点，但我认为这不会有什么帮助，因为最终addClass 所做的只是添加类——它不会删除类字符串中的任何内容。

【解决方案5】：

你总是可以做到的：

jQuery(".tabs a").click(function(){
    this.className += '_on';
}

这将添加所需的后缀。

将“激活”类添加到包含“li”的更好。

jQuery(".tabs a").click(function(){
    $(this).parent().toggleClass('on');
}

你的 CSS 应该是这样的：

/* here i removed the 'a.how_on' entry */
.how,
a.how:link,
a.how:visited
{
  float: left;
  display: inline;
  width: 135px;
  height: 29px;
  margin: 0;
  text-decoration: none;
  text-indent: -99999px;
  overflow: hidden;  
}

a.how:visited, a.how:link, a.how:hover
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -58px;
}

/* this will cause the link to behave different when its parent is of class on */
.on a.how
{
    background-image: url("../images/how_tab.jpg");
    background-position: 0 -29px;
}

您可以为您的标签链接定义一般行为

.tabs a { /* style */ }
.tabs a:link { /* link style */ }
.tabs a:hover { /* hover style */ }

.tabs .on a { /* activated style */ }
.tabs .on a:link { /* activated link style */ }
.tabs .on a:hover { /* activated hover style */ }

【讨论】：

这可能会自行工作，但是当我在上面的代码中添加它时，它破坏了整个过程。现在 DIV 之间的选项卡切换非常完美，我只需要通过单击选项卡来更改图像。
其实如果我只是添加，this.className += '_on';这可行，但是当我单击另一个选项卡时它不会关闭。嗯..
当我点击它时，这改变了 HOW 上的图像，但是当我点击 WHY 时它并没有关闭“on”。
我想这就是问题所在，如果我有 5 个选项卡，然后我点击 #1，它现在被列为“on”，然后如果我点击 #2，它被列为“on”但是 #1从未关闭。
我已经更新了上面的 CSS，这似乎有效，我只需要在页面加载时激活第一个选项卡，然后当您单击另一个选项卡时将其他选项卡停用。

【解决方案6】：

你可以用这个完全替换你的 jQuery 部分；

这必须按预期工作！

JAVASCRIPT 部分

$(function() {

    var tabs = $('div.tab_body > div.tab');
    tabs.hide().filter(':first').show();

    $('div#tab_container ul.tabs a').click(function() {
        tabs.hide();
        var myhash = this.hash.split('#')[1];

        tabs.filter(this.hash).show();

        $('a:not(.' + myhash + '_on)').each(function() {
            var h = this.hash.split('#')[1];
            $(this).removeClass(h + '_on').addClass(h);
        });
        $(this).removeClass(myhash).addClass(myhash + '_on');

        return false;
    }).filter(':first').click();
});

HTML 部分

<div id="tab_container">
 <ul class="tabs">
    <li><a class="how" href="#how">How</a></li>
    <li><a class="why" href="#why">Why</a></li>
    <li><a class="what" href="#what">What</a></li>
    <li><a class="who" href="#who">Who</a></li>
    <li><a class="when" href="#when">When</a></li>
</ul>            
</div>

<div class="tab_body">
    <div id="how" class="tab">
        <strong>how</strong>
    </div>
    <div id="why" class="tab">
        <strong>why:</strong>
    </div>
    <div id="what" class="tab">
        <strong>what</strong>
    </div>
    <div id="who" class="tab">
        <strong>who</strong>
    </div>
    <div id="when" class="tab">
     <strong>when</strong>
    </div>
  </div>

希望对您有所帮助！

问候

【讨论】：

有没有办法自动化这个，比如让tab 1在几秒钟后自动变为tab2等等等等？感谢大家的帮助！

【解决方案7】：

有几种方法。

删除类，将_on 附加到字符串并添加新类。
只需设计您的*_on 类即可修改原始类样式。然后，您只需删除 *_on 类即可恢复到旧样式。

【讨论】：

【解决方案8】：

您为什么不直接将on 类添加到相关元素中，并将您的CSS 规则从.how and .how_on 更改为.how and .how.on？

然后，在您的 .how.on 中，您可以覆盖您想要更改的 .how 中设置的任何内容。

我认为你不需要将 JavaScript/jQuery 屈从于你的意愿，而是使用 CSS 的特殊性来实现它的目的。

【讨论】：

您必须小心使用 .how.on，因为它在旧版浏览器中无法可靠运行。但是，您应该仍然可以毫无问题地在 jQuery 中定位。