Web-Frontend
js-Tutorial
So implementieren Sie mehrere Registerkarten in Javascript, indem Sie die Fähigkeiten des HTML-Tag-Attributs class_javascript erwerben
So implementieren Sie mehrere Registerkarten in Javascript, indem Sie die Fähigkeiten des HTML-Tag-Attributs class_javascript erwerben
Das Beispiel in diesem Artikel beschreibt, wie Javascript mehrere Tabs implementiert, indem es die HTML-Tag-Attributklasse abruft. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生javascript通过获取html标签属性class实现多选项卡</title>
<style type="text/css">
.tab {
clear: both;
margin: 20px auto;
padding: 10px;
width: 680px;
overflow: hidden;
}
.tab .tab-menu {
margin: 0;
padding: 0;
list-style: none;
}
.tab .tab-menu li {
display: inline;
margin: 0 2px 0 0;
}
.tab .tab-menu li a {
padding: 0 1em;
text-decoration: none;
color: #a80;
background: #fe5;
}
.tab .tab-menu li a:hover {
background: #fc0;
color: #540;
}
.tab .tab-menu .active {
}
.tab .tab-menu .active a {
padding-bottom: 2px;
font-weight: bold;
color: black;
background: #fc0;
}
.tab .tab-panel {
padding: 1em;
border: 2px solid #fc0;
background: #fff;
}
.tab .tab-panel h2 {
font-size: 1.5em;
color: #fc0;
}
.tab .tab-none {
display: none;
}
</style>
<script type="text/javascript">
function Tab(style, scope){
this.oItem = this.getByClass(style, scope);
this.init();
}
Tab.prototype = {
init: function(){
var that = this, menu, m;
for(var i = 0, len = this.oItem.length; i < len; i++){
menu = this.oItem[i].getElementsByTagName('li');
for(var j = 0, mLen = menu.length; j < mLen; j++){
m = menu[j];
m.index = j;
m.onmouseover = function(){that.focus(this);}
}
}
},
focus: function(o){
var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'),
btn = par.getElementsByTagName('li'), len = btn.length;
for(var i = 0; i < len; i++){
btn[i].className = '';
panel[i].className = this.changeClass(panel[i].className, 'tab-none', true);
}
o.className = 'active';
panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false);
},
changeClass: function(cl, cl2, add){
var flag;
if(cl.match(cl2) != null) flag = true;
if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2;
return cl;
},
getByClass: function(cla, obj){
var obj = obj || document, arr = [];
if(document.getElementsByClassName){
return document.getElementsByClassName(cla);
} else {
var all = obj.getElementsByTagName('*');
for(var i = 0, len = all.length; i < len; i++){
if(all[i].className.match(cla) != null) arr.push(all[i]);
}
return arr;
}
}
}
window.onload = function(){
new Tab('tab-menu', null);
}
</script>
</head>
<body>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">111</a></li>
<li><a href="">122</a></li>
<li><a href="">133</a></li>
</ul>
<div class="tab-panel">
111
</div>
<div class="tab-panel tab-none">
122
</div>
<div class="tab-panel tab-none">
133
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">211</a></li>
<li><a href="">222</a></li>
<li><a href="">233</a></li>
</ul>
<div class="tab-panel">
211
</div>
<div class="tab-panel tab-none">
222
</div>
<div class="tab-panel tab-none">
233
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">311</a></li>
<li><a href="">322</a></li>
<li><a href="">333</a></li>
</ul>
<div class="tab-panel">
311
</div>
<div class="tab-panel tab-none">
322
</div>
<div class="tab-panel tab-none">
333
</div>
</div>
</body>
</html>
Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1387
52
Wie entferne ich HTML-Tags aus einer Zeichenfolge in PHP?
Mar 23, 2024 pm 09:03 PM
PHP ist eine häufig verwendete serverseitige Skriptsprache, die häufig in der Website-Entwicklung und der Back-End-Anwendungsentwicklung eingesetzt wird. Bei der Entwicklung einer Website oder Anwendung kommt es häufig vor, dass Sie HTML-Tags in Zeichenfolgen verarbeiten müssen. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP HTML-Tags aus Zeichenfolgen entfernen, und es werden spezifische Codebeispiele bereitgestellt. Warum müssen Sie HTML-Tags entfernen? Bei der Verarbeitung von Benutzereingaben oder aus einer Datenbank abgerufenem Text werden häufig HTML-Tags einbezogen. Manchmal möchten wir diese HTML-Tags entfernen, wenn wir Text anzeigen
Ersetzen Sie den Klassennamen eines Elements mit jQuery
Feb 24, 2024 pm 11:03 PM
jQuery ist eine klassische JavaScript-Bibliothek, die in der Webentwicklung weit verbreitet ist. Sie vereinfacht Vorgänge wie die Verarbeitung von Ereignissen, die Bearbeitung von DOM-Elementen und die Durchführung von Animationen auf Webseiten. Bei der Verwendung von jQuery kommt es häufig vor, dass Sie den Klassennamen eines Elements ersetzen müssen. In diesem Artikel werden einige praktische Methoden und spezifische Codebeispiele vorgestellt. 1. Verwenden Sie die Methoden „removeClass()“ und „addClass()“. jQuery stellt die Methode „removeClass()“ zum Löschen bereit
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Detaillierte Erläuterung der Verwendung der PHP-Klasse: Machen Sie Ihren Code klarer und leichter lesbar
Mar 10, 2024 pm 12:03 PM
Beim Schreiben von PHP-Code ist die Verwendung von Klassen eine weit verbreitete Praxis. Durch die Verwendung von Klassen können wir verwandte Funktionen und Daten in einer einzigen Einheit kapseln, wodurch der Code klarer, leichter lesbar und einfacher zu warten ist. In diesem Artikel wird die Verwendung von PHPClass ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, besser zu verstehen, wie Klassen zur Optimierung von Code in tatsächlichen Projekten angewendet werden. 1. Klassen erstellen und verwenden In PHP können Sie das Schlüsselwort class verwenden, um eine Klasse zu definieren und Eigenschaften und Methoden in der Klasse zu definieren.
Bottom-Attributsyntax in CSS
Feb 21, 2024 pm 03:30 PM
Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel
Einführung in die Eigenschaften von Hearthstones Despair Thread
Mar 20, 2024 pm 10:36 PM
Thread of Despair ist eine seltene Karte in Blizzard Entertainments Meisterwerk „Hearthstone“ und kann im Kartenpaket „Wizbane's Workshop“ erhalten werden. Kann 100/400 arkane Staubpunkte verbrauchen, um die Normal-/Goldversion zu synthetisieren. Einführung in die Eigenschaften von Hearthstones Faden der Verzweiflung: Er kann mit einer Chance in Wizbanes Werkstattkartenpaket erhalten oder auch durch arkanen Staub synthetisiert werden. Seltenheit: Selten Typ: Zauber Klasse: Todesritter Mana: 1 Wirkung: Verleiht allen Dienern ein Todesröcheln: Fügt allen Dienern 1 Schaden zu
So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript
Jan 05, 2024 pm 01:37 PM
Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat?
Feb 29, 2024 am 09:03 AM
Wie kann man feststellen, ob ein jQuery-Element ein bestimmtes Attribut hat? Wenn Sie jQuery zum Betreiben von DOM-Elementen verwenden, stoßen Sie häufig auf Situationen, in denen Sie feststellen müssen, ob ein Element ein bestimmtes Attribut hat. In diesem Fall können wir diese Funktion einfach mit Hilfe der von jQuery bereitgestellten Methoden implementieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt, um festzustellen, ob ein jQuery-Element über bestimmte Attribute verfügt, und um spezifische Codebeispiele anzuhängen. Methode 1: Verwenden Sie die Methode attr() und den Operator typeof //, um zu bestimmen, ob das Element ein bestimmtes Attribut hat
