Erläuterung des Tab-Label-Wechseleffekts mit JavaScript
Dies ist ein Tab-Switching-Effekt, der auf js basiert. Es handelt sich um einen Tab-Switching-Effekt-Quellcode, der von nativem Javascript ohne jQuery erstellt wurde. Klicken Sie auf den Titel oben, um die Umschaltfunktion der entsprechenden Seite zu nutzen, die von großem praktischen Wert ist. Vorgangswiedergabe:
Tipps: Wenn der Browser nicht normal ausgeführt werden kann, können Sie versuchen, den Browsermodus zu wechseln. Der in js implementierte Code für den Tab-Label-Wechseleffekt zum Teilen mit allen lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现tab标签切换效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px;}
#menu{width:360px; overflow:hidden; margin:100px auto;border:1px solid #BF9660;}
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center; color:#333;}
#menu_con{ width:358px; height:135px; border-top:none}
.tag{ padding:10px; overflow:hidden;}
.selected{background:#C5A069; color:#fff;}
</style>
</head>
<body>
<!--代码部分begin-->
<p id="menu">
<!--tag标题-->
<ul id="nav">
<li><a href="#" class="selected">jQuery特效</a></li>
<li><a href="#" class="">tab切换</a></li>
<li><a href="#" class="">菜单导航</a></li>
</ul>
<!--二级菜单-->
<p id="menu_con">
<p class="tag" style="display:block">
这里是jQuery特效内容列表
</p>
<p class="tag" style="display:none">
这里是tab切换效果
</p>
<p class="tag" style="display:none">
这里是菜单导航效果
</p>
</p>
</p>
<script>
var tabs=function(){
function tag(name,elem){
return (elem||document).getElementsByTagName(name);
}
//获得相应ID的元素
function id(name){
return document.getElementById(name);
}
function first(elem){
elem=elem.firstChild;
return elem&&elem.nodeType==1? elem:next(elem);
}
function next(elem){
do{
elem=elem.nextSibling;
}while(
elem&&elem.nodeType!=1
)
return elem;
}
return {
set:function(elemId,tabId){
var elem=tag("li",id(elemId));
var tabs=tag("p",id(tabId));
var listNum=elem.length;
var tabNum=tabs.length;
for(var i=0;i<listNum;i++){
elem[i].onclick=(function(i){
return function(){
for(var j=0;j<tabNum;j++){
if(i==j){
tabs[j].style.display="block";
//alert(elem[j].firstChild);
elem[j].firstChild.className="selected";
}
else{
tabs[j].style.display="none";
elem[j].firstChild.className="";
}
}
}
})(i)
}
}
}
}();
tabs.set("nav","menu_con");//执行
</script>
<!--代码部分end-->
</body>
</html>Das obige ist der detaillierte Inhalt vonErläuterung des Tab-Label-Wechseleffekts mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
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
1381
52
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultra ist eines der beliebtesten Xiaomi-Modelle in diesem Jahr. Xiaomi 14Ultra verbessert nicht nur den Prozessor und verschiedene Konfigurationen, sondern bringt den Benutzern auch viele neue funktionale Anwendungen beliebt, aber es gibt einige häufig verwendete Funktionen, die Sie vielleicht noch nicht kennen. Wie wechselt das Xiaomi 14Ultra zwischen 4g und 5g? Lassen Sie mich Ihnen unten den spezifischen Inhalt vorstellen! Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g? 1. Öffnen Sie das Einstellungsmenü Ihres Telefons. 2. Suchen Sie im Einstellungsmenü nach den Optionen „Netzwerk“ und „Mobiles Netzwerk“ und wählen Sie sie aus. 3. In den Mobilfunknetzeinstellungen sehen Sie die Option „Bevorzugter Netztyp“. 4. Klicken oder wählen Sie diese Option und Sie werden sehen
Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version_Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version
Mar 20, 2024 pm 01:58 PM
Wie konvertiert man Win11 Home Edition in Win11 Professional Edition? Im Win11-System ist es in Home Edition, Professional Edition, Enterprise Edition usw. unterteilt, und auf den meisten Win11-Notebooks ist das Win11 Home Edition-System vorinstalliert. Heute zeigt Ihnen der Editor die Schritte zum Wechsel von der Win11-Home-Version zur Professional-Version 1. Klicken Sie zunächst mit der rechten Maustaste auf diesen Computer auf dem Win11-Desktop und den Eigenschaften. 2. Klicken Sie auf Produktschlüssel ändern oder Windows aktualisieren. 3. Klicken Sie dann nach der Eingabe auf Produktschlüssel ändern. 4. Geben Sie den Aktivierungsschlüssel ein: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB und wählen Sie Weiter. 5. Dann wird der Erfolg angezeigt, sodass Sie die Win11-Home-Version auf die Win11-Professional-Version aktualisieren können.
So implementieren Sie die Dual-System-Umschaltung im Win10-System
Jan 03, 2024 pm 05:41 PM
Viele Freunde sind möglicherweise nicht an das Win-System gewöhnt, wenn sie zum ersten Mal damit in Berührung kommen. Es gibt duale Systeme im Computer. Schauen wir uns nun die detaillierten Schritte zum Wechseln an zwischen den beiden Systemen. So wechseln Sie zwischen zwei Systemen im Win10-System 1. Umschalten der Tastenkombination 1. Drücken Sie die Tasten „win“ + „R“, um „Ausführen“ zu öffnen. 2. Geben Sie „msconfig“ in das Feld „Ausführen“ ein und klicken Sie auf „OK“. 3. Im geöffneten Fenster „ „Systemkonfiguration“ Wählen Sie in der Benutzeroberfläche das gewünschte System aus und klicken Sie auf „Als Standard festlegen“. Nach Abschluss kann „Neustart“ den Wechsel abschließen. Methode 2. Schalter beim Booten auswählen 1. Wenn Sie über duale Systeme verfügen, steht Ihnen eine Auswahloperationsschnittstelle zur Verfügung wird beim Booten angezeigt. Sie können die Auf- und Ab-Tasten der Tastatur verwenden, um das System auszuwählen
Wechseln Sie den Dual-System-Startmodus des Apple-Computers
Feb 19, 2024 pm 06:50 PM
So wechseln Sie beim Start zwischen Apple-Dual-Systemen Als leistungsstarkes Gerät können Apple-Computer zusätzlich zu ihrem eigenen macOS-Betriebssystem auch andere Betriebssysteme wie Windows installieren, um einen Dual-System-Wechsel zu erreichen. Wie wechseln wir also beim Booten zwischen den beiden Systemen? In diesem Artikel erfahren Sie, wie Sie auf Apple-Computern zwischen Dual-Systemen wechseln. Bevor wir Dual-Systeme installieren, müssen wir zunächst bestätigen, ob unser Apple-Computer Dual-System-Switching unterstützt. Im Allgemeinen basieren Apple-Computer auf
So verwenden Sie Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel
Mar 20, 2024 pm 01:50 PM
Bei der Anwendung von Excel-Software sind wir es gewohnt, Tastenkombinationen zu verwenden, um einige Vorgänge einfacher und schneller zu machen. Wenn wir sie anzeigen, müssen wir ständig zwischen Aufgaben wechseln Durch die schnellere Umschaltmethode wird viel Zeit beim Umschalten eingespart, was erheblich zur Verbesserung der Arbeitseffizienz beiträgt. Um dieses Problem zu lösen, wird der Redakteur heute darüber sprechen : So verwenden Sie die Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel. 1. Zuerst sehen Sie unten in der geöffneten Excel-Tabelle mehrere Arbeitsmappen. Sie müssen schnell zwischen verschiedenen Arbeitsmappen wechseln, wie in der Abbildung unten gezeigt. 2. Drücken Sie dann die Strg-Taste auf der Tastatur, ohne sie zu bewegen, und wählen Sie bei Bedarf den Job rechts aus
Ich kann in Win11 nicht mit Alt+Tab die Schnittstelle wechseln. Was ist der Grund?
Jan 02, 2024 am 08:35 AM
Win11 unterstützt Benutzer dabei, die Tastenkombination Alt+Tab zu verwenden, um das Tool zum Wechseln des Desktops aufzurufen. Kürzlich ist jedoch ein Freund auf das Problem gestoßen, dass Win11 Alt+Tab die Benutzeroberfläche nicht wechseln kann. Ich kenne den Grund nicht und weiß nicht, wie ich es lösen kann. Warum kann Win11 Alt+Tab die Schnittstelle nicht wechseln? Antwort: Da die Tastenkombinationsfunktion deaktiviert ist, ist hier die Lösung: 1. Zuerst drücken wir „win+r“ auf der Tastatur, um den Lauf zu öffnen. 2. Geben Sie dann „regedit“ ein und drücken Sie die Eingabetaste, um die Gruppenrichtlinie zu öffnen. 3. Geben Sie dann „HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer“ ein.
PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen
Dec 18, 2023 pm 03:39 PM
Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt
