jQuery - addClass ou RemoveClass - Y a-t-il une classe d'ajout?

Question

J'ai CSS survole les images pour mes onglets et j'essaie de faire passer la classe de .sia à .How_on lorsque je clique sur l'image comment.

Mes onglets sont

Comment | Quoi | Quand | Qui | POURQUOI

J'ai des cours pour chacun (.wow, .how_on), (.What, .what_on), etc ...

Puis-je faire ajouter jQuery _on au nom de classe d'origine à l'aide de click (function () {}); ?

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

Answer 1

ACTUALISÉ:

Essaye ça:

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

Vous utilisez le nom de classe pour créer un ID unique. Cela accomplira la même chose que vous essayez de faire. Voici un échantillon avec "pourquoi" sélectionné.

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

Bien sûr, Le moyen le plus simple est d'ajouter la classe .How_on et d'avoir les deux classes.

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

Rien de mal à cela et vous pouvez facilement remplacer les styles ou cibler l'élément.

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

Si vous souhaitez vous assurer qu'il le remplace, augmentez la spécificité.

Answer 2

Lorsque vous utilisez addClass, il ajoute / ajoute un cours à moins que vous en supprimiez en premier removeClass, donc vous aimez ceci:

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

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

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

Answer 3

Je souhaite que JQuery ait cela, mais pour autant que je sache, ce n'est pas le cas. Vous pouvez toujours utiliser removeClass pour se débarrasser d'une version et addClass pour ajouter l'autre. Alternativement, vous pouvez cuisiner votre propre petit plugin. Cela semble être une chose utile à faire; Même JQuery UI doit faire face à la chasse à toutes ses classes ("UI-State-Default", "UI-State-Hover", etc.) et il serait plus facile s'il pouvait simplement appeler une API pour mettre à jour la STEM de la classe " -State- "Avec un suffixe choisi.

Ainsi, la simple façon jQuery de le faire dans votre cas serait quelque chose comme:

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

Tu appellerais alors turnOn("how") Lorsque vous voulez que l'onglet "comment" passe à la classe "comment_on", et turnOff("how") Pour le faire passer de "how_on" à "comment".

Answer 4

.addClass( function(index, class) )

AddClass prend une fonction anonyme et vous pouvez ajouter la logique pour ajouter la classe ici

Comme

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

Answer 5

Vous pouvez toujours faire:

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

qui ajoutera le suffixe souhaité.

Encore mieux sera d'ajouter la classe "Activation" au «Li» contenant.

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

Et votre CSS devrait ressembler à ceci:

/* 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;
}

Et vous pouvez définir un comportement général pour vos onglets

.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 */ }

Answer 6

Tu peux Remplacez complètement votre partie jQuery avec ça;

Cela doit fonctionner comme prévu!

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

Partie 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>

J'espère que cette aide!

Salutations

Answer 7

Il y a quelques approches.

1. Supprimer la classe, ajouter _on à la chaîne et ajoutez la nouvelle classe.
2. Concevez simplement votre *_on Classes pour modifier les styles de classes originaux. Alors tout ce que vous avez à faire est de supprimer le *_on classe pour revenir à l'ancien style.

Answer 8

Pourquoi n'ajoutez-vous pas simplement la classe on aux éléments en question et modifier vos règles CSS à partir de .how and .how_on à .how and .how.on?

Ensuite, dans votre .how.on vous pouvez simplement remplacer tout ce qui est défini dans le .how que vous voulez changer.

Je ne pense pas que vous ayez besoin de plier JavaScript / jQuery à votre volonté, utilisez plutôt la spécificité CSS pour ce à quoi il était destiné.