logo标签列表

jQuery - addClass或removeClass - 是否有追加类？

jquerycsstabsaddclassremoveclass
4

我有一些带有css hover效果的选项卡图片，当我点击HOW图片时，我想让类从.how变为.how_on。

我的选项卡是：

HOW | WHAT | WHEN | WHO | WHY

我为每个选项卡都设置了类（.how, .how_on），（.what, .what_on）等等...

我能否使用click(function(){});使jQuery在原始类名后添加_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");
}
8个回答
3
我希望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")函数；当你想要将其从“how_on”变为“how”时，则需要使用turnOff("how")函数。

是啊，我只希望我更了解jQuery，这样对我来说会更容易，哈哈。然而，我只想在选定的选项卡上添加“_on”，这将使背景位置在图像上发生变化并解决我的问题。类似于 jQuery('.tab#' + stringref).addClass('_on') 这样的东西吗？显然这也没有起作用。还需要额外的帮助吗？ - iamtheratio
这个也不起作用... jQuery('.tab#' + stringref).addClass('.tab#' + stringreg + '_on'); - iamtheratio
那是因为你做错了 :-) 就像我说的，jQuery没有提供直接的方法来做到这一点。我会更新我的答案。 - Pointy
3
当您使用 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
@Peter，同意，但我已经在我的回答中提到了这件事情。谢谢。 - Sarfraz
2

已更新：

尝试这个：

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

您正在使用类名创建唯一ID。这将实现您尝试做的同样的事情。以下是所选的 "why" 示例。
 <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'); 然而...我尝试了一下，运气不太好。我是个初学者，所以需要一点时间来掌握它 :) - iamtheratio
是的，那段代码是我脑海中想出来的。className会获取名称，但它会返回所有名称。你真的必须问问自己你想要实现什么。如果只是CSS样式，我建议你尝试最简单的方法，使用样式覆盖。 - Armstrongest
是的，我同意，但我不想改变数据的容器，只是li a img。我会更新顶部的CSS，以便您更好地查看我的li a css。虽然非常感谢所有的帮助，谢谢。 - iamtheratio
更新了。这个应该能正常工作，使用了很少的代码并且应该相当快。我建议你将标签容器命名为一个ID，因为它们遍历起来更快。 - Armstrongest
你知道是否有自动化/动画的方法吗？就像幻灯片一样，如果几秒钟后未单击选项卡2，则自动淡入它？ - iamtheratio
显示剩余3条评论
1
.addClass( function(index, class) )

addClass 接受一个匿名函数，你可以在这里添加逻辑来附加类

例如：

$('ELEMENT SELECTION').addClass(function() {
  return $(this).attr("class") + 'CLASS TO BE ADDED';
});
1
这很好知道，但我认为它并没有真正帮助，因为最终所有addClass将做的就是添加类 - 它不会清除类字符串中的任何内容。 - Pointy
1

你总是可以做到：

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

这将添加所需的后缀。

更好的方法是将“activation”类添加到包含的'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之间切换选项卡非常完美，我只需要点击选项卡时更改图像。 - iamtheratio
实际上，如果我只是添加这个：this.className += '_on'; 这个可以工作，但是当我点击另一个选项卡时它就无法关闭了。嗯。。 - iamtheratio
当我点击HOW时，它改变了图像，但是当我点击WHY时，它没有关闭“on”。 - iamtheratio
我猜现在的问题是，如果我有5个选项卡，我点击#1，它现在被列为“开启”，然后如果我点击#2，它也被列为“开启”，但是#1从未关闭。 - iamtheratio
我已经更新了上面的CSS，这似乎有效，我只需要在页面加载时激活第一个选项卡，然后当您单击另一个选项卡时，其他选项卡将被取消激活。 - iamtheratio
1

你可以完全用这个替换你的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>

希望这能帮到你！

祝好！

有没有办法自动化这个过程，比如在几秒钟后自动将标签1更改为标签2，以此类推？非常感谢您的帮助！ - iamtheratio
0

有几种方法。

  1. 删除类，将_on添加到字符串中并添加新类。
  2. 只需设计您的*_on类来修改原始类的样式。然后，您只需要删除*_on类即可恢复到旧样式。
0
为什么不直接将类on添加到相关元素，并将CSS规则从.how和.how_on更改为.how和.how.on？
然后，在您的.how.on中，您可以轻松地覆盖任何要更改的.how中设置的内容。
我认为您不需要强制使用JavaScript / jQuery，而是应该按照CSS特异性的本意来使用它。
你必须小心使用.how.on，因为它在旧版浏览器中无法可靠地工作。然而，在jQuery中仍然可以轻松定位目标。 - Armstrongest
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接