Web-Frontend
js-Tutorial
jQuery simuliert ein Dropdown-Feld, um das entsprechende Menü auszuwählen
jQuery simuliert ein Dropdown-Feld, um das entsprechende Menü auszuwählen
Dieser Artikel stellt hauptsächlich den Inhalt des Dropdown-Menüs für die jQuery-Simulation vor. Er ist sehr gut und hat einen Referenzwert. Ich hoffe, er kann jedem helfen.
Lassen Sie mich Ihnen zuerst die Renderings zeigen:
Der folgende Code teilt Ihnen den Inhalt des entsprechenden Menüs mit, das aus dem simulierten Drop ausgewählt wurde -down-Box basierend auf jquery, der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li,a,p{margin: 0;padding: 0;}
a{text-decoration: none; color: #555;font-size: 23px;}
.zn-classreport-tabs{}
.zn-classreport-tabstle{
font-size: 16px;
position: relative;
width: 200px;
margin: 15px 20px;
line-height: 35px;
cursor: pointer;
padding: 0px 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.zn-classreport-tabstle>ul{
display: none;
position: absolute;
top: 36px;
left: 0;
width: 90%;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
}
.zn-classreport-tabstle li{
float: left;
text-align: center;
width: 100%;
font-size: 14px;
margin-bottom: 4px;
}
.zn-classreport-tabstle li:hover,.zn-classreport-tabstle li.active{
background-color: #ccc;
color: #fff;
}
.zn-classreport-tabscnt{
float: left;
width: 100%;
}
.zn-classreport-tabsbox{
margin: 10px;
display: none;
font-size: 16px;
}
.zn-classreport-tabsbox.active{
display: block;
}
.zn-classreport-tabsbox img{
width: 350px;
}
</style>
</head>
<body>
<p class="zn-classreport-tabs">
<p class="zn-classreport-tabstle">
<span>请选择课程</span>
<input type="hidden" name="test_1" class="value" value="" />
<ul class="select">
<li value="1">蒙妮妮摄影班</li>
<li value="2">昕丽冲印班</li>
<li value="3">宝丽冲印班</li>
</ul>
</p>
<p class="zn-classreport-tabscnt">
<p class="zn-classreport-tabsbox active">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/u149.jpg">
<p class="text">
<p>蒙妮妮摄影班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
<p class="zn-classreport-tabsbox-fr"></p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/goods-index-1.jpg">
<p class="text">
<p>昕丽冲印班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
</p>
<p class="zn-classreport-tabsbox ">
<p class="zn-classreport-tabsbox-fl">
<img class="img " src="upload/images/wifi_04.jpg">
<p class="text">
<p>宝丽冲印班</p>
<p><span>课程介绍：</span></p><p><span><br></span></p><p><span>本课程包括摄影基础、曝光、构图，器材的使用</span></p><p><span>和摄影小技巧，风光摄影初级，人像摄影及婚纱</span></p><p><span>摄影，产品摄影，重点讲解人像写真与私房摄影，</span></p><p><span>作品点评，PS基础、数码调色与常用技巧。</span></p>
</p>
</p>
</p>
</p>
</p>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//报班系列
$('.zn-classreport-tabs ').each(function(){
var _this = $(this);
var cur_tab = false; //当前标签
$(_this).find('.zn-classreport-tabstle').each(function(){
var _tlethis = $(this);
var select = $(this).find('.select');
var hidden = $(this).find('.value');
var span = $(this).find('span');
$( _tlethis).click(function(){
$(select).show();
})
$(_tlethis).find('ul.select li').each(function(){
$(this).click(function(){
$(hidden).val( $(this).attr('value') );
$(select).hide();
$(span).html($(this).html());
return false;
});
});
});
//多标签内容处理
$(_this).find('.zn-classreport-tabstle li').click(function(){
if (cur_tab == this) {
return true;
}
now_pos = $(cur_tab).index();//开始的
new_pos = $(this).index();//当前的
$(_this).find('.zn-classreport-tabsbox').eq(now_pos).removeClass('active');
$(_this).find('.zn-classreport-tabsbox').eq(new_pos).addClass('active');
$(cur_tab).removeClass('active');
$(this).addClass('active');
cur_tab=this;
});
$(_this).find('.zn-classreport-tabstle li').first().click();
});
});
</script>
</body>
</html>Verwandte Empfehlungen:
jQuery implementiert ein Auswahl-Dropdown-Feld, um den aktuell ausgewählten Text abzurufen
Das obige ist der detaillierte Inhalt vonjQuery simuliert ein Dropdown-Feld, um das entsprechende Menü auszuwählen. 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
1377
52
Kann die Wallpaper-Engine von Familien gemeinsam genutzt werden?
Mar 18, 2024 pm 07:28 PM
Unterstützt Wallpaper die Familienfreigabe? Leider kann dies nicht unterstützt werden. Dennoch haben wir Lösungen. Sie können beispielsweise mit einem kleinen Konto einkaufen oder die Software und Hintergrundbilder zunächst von einem großen Konto herunterladen und dann zum kleinen Konto wechseln. Das einfache Starten der Software ist vollkommen in Ordnung. Kann Wallpaperengine mit der Familie geteilt werden? Antwort: Wallpaper unterstützt derzeit nicht die Familienfreigabefunktion. 1. Es versteht sich, dass WallpaperEngine nicht für Familienfreigabeumgebungen geeignet zu sein scheint. 2. Um dieses Problem zu lösen, wird empfohlen, den Kauf eines neuen Kontos in Betracht zu ziehen. 3. Oder laden Sie zuerst die erforderliche Software und Hintergrundbilder im Hauptkonto herunter und wechseln Sie dann zu anderen Konten. 4. Öffnen Sie einfach die Software mit einem leichten Klick und alles ist in Ordnung. 5. Sie können die Eigenschaften auf der oben genannten Webseite einsehen.
Wie stelle ich das Hintergrundbild für den Sperrbildschirm in der Wallpaper-Engine ein? So verwenden Sie die Wallpaper-Engine
Mar 13, 2024 pm 08:07 PM
WallpaperEngine ist eine Software, die häufig zum Festlegen von Desktop-Hintergrundbildern verwendet wird. Benutzer können in WallpaperEngine nach ihren Lieblingsbildern suchen, um Desktop-Hintergrundbilder zu erstellen. Sie unterstützt auch das Hinzufügen von Bildern vom Computer zu WallpaperEngine, um sie als Computer-Hintergrundbilder festzulegen. Werfen wir einen Blick darauf, wie WallpaperEngine das Hintergrundbild für den Sperrbildschirm festlegt. Tutorial zum Einstellen des Hintergrundbilds für den Sperrbildschirm von WallpaperEngine 1. Rufen Sie zuerst die Software auf, wählen Sie dann „Installiert“ aus und klicken Sie auf „Hintergrundoptionen konfigurieren“. 2. Nachdem Sie das Hintergrundbild in separaten Einstellungen ausgewählt haben, müssen Sie unten rechts auf OK klicken. 3. Klicken Sie dann oben auf die Einstellungen und Vorschau. 4. Weiter
Gibt es beim Ansehen von Wallpaper Engine-Filmen einen Virus?
Mar 18, 2024 pm 07:28 PM
Benutzer können bei Verwendung von WallpaperEngine verschiedene Hintergrundbilder herunterladen und auch dynamische Hintergrundbilder verwenden. Viele Benutzer wissen nicht, ob beim Ansehen von Videos auf WallpaperEngine Viren vorhanden sind, Videodateien können jedoch nicht als Viren verwendet werden. Gibt es Viren beim Ansehen von Filmen auf WallpaperEngine? Antwort: Nein. 1. Nur Videodateien können nicht als Viren verwendet werden. 2. Stellen Sie einfach sicher, dass Sie Videos von vertrauenswürdigen Quellen herunterladen und Computersicherheitsmaßnahmen ergreifen, um das Risiko einer Virusinfektion zu vermeiden. 3. Anwendungshintergründe liegen im APK-Format vor und APK kann Trojaner enthalten. 4. WallpaperEngine selbst enthält keine Viren, aber einige Anwendungshintergründe in der Kreativwerkstatt können Viren enthalten.
In welchem Ordner befinden sich die Hintergrundbilder der Wallpaper Engine?
Mar 19, 2024 am 08:16 AM
Bei der Verwendung von Hintergrundbildern können Benutzer verschiedene Hintergrundbilder herunterladen, die ihnen gefallen. Viele Benutzer wissen nicht, in welchem Ordner sich die Hintergrundbilder befinden. Die von Benutzern heruntergeladenen Hintergrundbilder werden im Inhaltsordner gespeichert. In welchem Ordner befindet sich das Hintergrundbild? Antwort: Inhaltsordner. 1. Öffnen Sie den Datei-Explorer. 2. Klicken Sie links auf „Dieser PC“. 3. Suchen Sie den Ordner „STEAM“. 4. Wählen Sie „Steamapps“. 5. Klicken Sie auf „Werkstatt“. 6. Suchen Sie den Ordner „content“.
Verbraucht die Wallpaper-Engine viel Strom?
Mar 18, 2024 pm 08:30 PM
Benutzer können ihre Computerhintergründe ändern, wenn sie WallpaperEngine verwenden. Viele Benutzer wissen nicht, dass WallpaperEngine viel Strom verbraucht als statische Hintergrundbilder. Verbraucht Wallpaperengine viel Strom? Antwort: Nicht viel. 1. Dynamische Hintergrundbilder verbrauchen etwas mehr Strom als statische Hintergrundbilder, aber nicht viel. 2. Durch die Aktivierung des dynamischen Hintergrundbilds erhöht sich der Stromverbrauch des Computers und es verringert sich die Speichernutzung geringfügig. 3. Benutzer müssen sich keine Sorgen über den hohen Stromverbrauch dynamischer Hintergrundbilder machen.
So ändern Sie die Schriftgröße im Microsoft Edge-Browser - So ändern Sie die Schriftgröße im Microsoft Edge-Browser
Mar 04, 2024 pm 05:58 PM
Ich schätze, Sie sind mit dem Microsoft Edge-Browser nicht vertraut, aber wissen Sie, wie man die Schriftgröße im Microsoft Edge-Browser ändert? Der folgende Artikel beschreibt, wie man die Schriftgröße im Microsoft Edge-Browser ändert. Suchen Sie zunächst den Microsoft Edge-Browser und doppelklicken Sie darauf, um ihn zu öffnen. Sie finden den Microsoft Edge-Browser in der Desktop-Verknüpfung, im Startmenü oder in der Taskleiste und können ihn per Doppelklick öffnen. Zweitens öffnen Sie die Benutzeroberfläche [Einstellungen], um diese Browseroberfläche aufzurufen, klicken Sie auf das [...]-Logo in der oberen linken Ecke und doppelklicken Sie auf [Einstellungen], um die Einstellungsoberfläche zu öffnen. Suchen und öffnen Sie erneut die Benutzeroberfläche [Darstellung] und scrollen Sie mit der Maus nach unten
Mar 18, 2024 pm 05:37 PM
Wie überprüfe ich Hintergrundbild-Abonnementdatensätze? Viele Benutzer haben eine große Anzahl von Abonnements für diese Software abgeschlossen, wissen jedoch möglicherweise nicht, wie sie diese Datensätze abfragen sollen. Tatsächlich müssen Sie es nur im Browsing-Funktionsbereich der Software bedienen. Wo sind WallpaperEngine-Abonnementdatensätze? Antwort: In der Browseroberfläche. 1. Bitte starten Sie zuerst den Computer und rufen Sie die Hintergrundsoftware auf. 2. Suchen Sie das Symbol der Registerkarte „Durchsuchen“ in der oberen linken Ecke der Anwendung und klicken Sie darauf. 3. In der „Durchsuchen“-Oberfläche sehen Sie eine Übersicht verschiedener Hintergrundbilder und Feeds. 4. Geben Sie die Schlüsselwörter, nach denen Sie suchen möchten, in das Suchfeld in der oberen rechten Ecke ein. 5. Anhand der Suchergebnisse können Sie die Quellinformationen des Wallpaper-Abonnements finden. 6. Klicken Sie auf den entsprechenden Feed, um dessen Webseite aufzurufen. 7. Bestellung
Welchen von den fünf Digimon New Age-Filmen soll ich wählen?
Mar 15, 2024 pm 03:58 PM
Digimon New Age ist ein neues Spiel, dessen sorgfältige Ausarbeitung drei Jahre gedauert hat. Dieses Spiel trägt die Kindheitserinnerungen in sich. Der Plan wird angepasst und wird bald veröffentlicht. Welches sollte man unter den fünf Digimon New Ages wählen? Werfen wir einen Blick auf die fünf Haustierempfehlungen für Digimon New Age. Digimon New Century Five: Welches soll man wählen: EarthGreymon, SeaLionmon, Leomon, FairyMon und Sunflowermon? Sie eignen sich besser zum Teaming und sind sowohl im Frühstadium als auch im Spätstadium gute Haustiere. Veranstaltungsort: 1. Öffnen Sie QQ, gehen Sie zum Game Center und suchen Sie nach der exklusiven Reservierungsveranstaltung für Digimon New Century QQ. 2. Klicken Sie auf die Veranstaltung, suchen Sie den Eingang, nehmen Sie an der Veranstaltung teil und beginnen Sie mit der Auswahl Ihres Lieblingspartners.
