JQuery - AddClass oder RemoveClass - Gibt es eine Anhangsklasse?
https://stackoverflow.com/questions/2427023
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe CSS -schwebe über Bilder für meine Registerkarten und versuche, die Klasse von .Wow zu .how_on zu ändern, wenn ich auf das Bild klicke, wie.
Meine Registerkarten sind
Wie | Was | Wenn | Wer | WARUM
Ich habe Klassen für jedes (.- sie, .how_on), (.Wh, .What_on) usw.
Kann ich jQuery _on zum ursprünglichen Klassennamen mit Click (function () {}) machen? ?
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");
}
Lösung
AKTUALISIERT:
Versuche dies:
$('.tabs a').click(function() {
$('.tabs a').removeAttr('id'); // remove all ids
$(this).attr('id', this.className + "_on") // create how_on as this id.
});
Sie verwenden den Klassennamen, um eine eindeutige ID zu erstellen. Es wird das Gleiche erreichen, was Sie versuchen zu tun. Hier ist ein Beispiel mit "Warum" ausgewählt.
<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>
Na sicher, Der einfachste Weg ist die Klasse .how_on und beide Klassen zu haben.
<div class='how how_on'>some stuff</div>
Daran ist nichts auszusetzen und Sie können Stile leicht überschreiben oder das Element abzielen.
.how { color: #000; }
div.how_on { color: #F00; } /* increased specificity */
Wenn Sie sicherstellen möchten, dass es es überschreibt, erhöhen Sie die Spezifität.
Andere Tipps
Wenn Sie verwenden addClass, Es fügt/fügt eine Klasse hinzu, es sei denn, Sie entfernen einige zuerst verwenden removeClass, Sie mögen Folgendes:
$('.how_on').mouseover(function(){
$(this).removeClass('class_name').addClass('class_name');
});
$('.why').mouseover(function(){
$(this).removeClass('class_name').addClass('class_name');
});
// and so on.........
Ich wünschte, JQuery hätte das, aber soweit ich das sagen kann, nicht. Sie können immer verwenden removeClass eine Version loswerden und addClass um den anderen hinzuzufügen. Alternativ können Sie Ihr eigenes kleines Plugin kochen. Scheint eine nützliche Sache zu tun; Sogar JQuery UI muss sich mit dem Munding aller Klassen ("UI-State-Default", "UI-State-Hover" usw. befassen, und es wäre einfacher, wenn sie einfach eine API anrufen könnte, um die Klasse der Klasse STEM zu aktualisieren. "UI -State- "mit einem gewählten Suffix.
Die einfache Art, dies in Ihrem Fall zu tun, wäre also so etwas wie:
// 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);
}
Sie würden dann anrufen turnOn("how") Wenn Sie möchten, dass die Registerkarte "Wie" zur Klasse "How_on" wechselt, und turnOff("how") Damit es von "How_on" zu "Wie" übergeht.
.addClass( function(index, class) )
AddClass übernimmt eine anonyme Funktion und Sie können die Logik hinzufügen, um die Klasse hier anzuhängen
wie
$('ELEMENT SELECTION').addClass(function() {
return $(this).attr("class") + 'CLASS TO BE ADDED';
});
Sie können immer:
jQuery(".tabs a").click(function(){
this.className += '_on';
}
das fügt das gewünschte Suffix hinzu.
Noch besser wird es sein, die "Aktivierungskurs" dem enthaltenden "li" hinzuzufügen.
jQuery(".tabs a").click(function(){
$(this).parent().toggleClass('on');
}
Und Ihr CSS sollte so aussehen:
/* 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;
}
und Sie können ein allgemeines Verhalten für Ihre Registerkarte definieren
.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 */ }
Du kannst Ersetzen Sie Ihr jQuery -Teil vollständig mit diesem;
Dies muss wie erwartet funktionieren!
JavaScript -Teil
$(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 -Teil
<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>
Ich hoffe das hilft!
Grüße
Es gibt einige Ansätze.
- Entfernen Sie die Klasse, hängen Sie an
_onzur Zeichenfolge und fügen Sie die neue Klasse hinzu. - Entwerfen Sie einfach Ihre
*_onKlassen, um die Originalklassenstile zu ändern. Dann müssen Sie nur das entfernen*_onKlasse, um zum alten Stil zurückzukehren.
Warum füge du nicht einfach die Klasse hinzu? on auf die fraglichen Elemente und ändern Sie Ihre CSS -Regeln von .how and .how_on zu .how and .how.on?
Dann in deinem .how.on Sie können einfach alles überschreiben, was in der festgelegt ist .how Das wollen Sie ändern.
Ich glaube nicht, dass Sie JavaScript/jQuery nach Ihrem Willen biegen müssen, sondern verwenden Sie die CSS -Spezifität für das, wofür es gedacht war.
