jQuery - addClass ou RemoveClass - Y a-t-il une classe d'ajout?
-
19-09-2019 - |
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");
}
La solution
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é.
Autres conseils
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.........
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".
.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';
});
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 */ }
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
Il y a quelques approches.
- Supprimer la classe, ajouter
_on
à la chaîne et ajoutez la nouvelle classe. - 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.
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é.