HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Code kopieren

Der Code 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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Registerkarte „Liste“</title>
<style type="text/css">
Körper{
Rand: 0px;
Polsterung: 0px;
}
#hauptsächlich{
Breite: 310px;
Rand: 1px durchgezogen #C8C8CC;
Rand links: automatisch;
Rand rechts: automatisch;
Rand oben: 50px;
}
.Haupttitel{
Breite: 310px;
Rahmen unten: 1px durchgezogen #C8C8CC;
Höhe: 30px;
}
#main div .chang{
Rand: 1px durchgezogen #C8C8CC;
schweben: links;
Breite: 153px;
Höhe: 26px;
Textausrichtung: zentriert;
Polsterung oben: 4px;
Cursor:Zeiger;
}
.Hauptkopf{
Breite: 310px;
Höhe: 25px;
Hintergrundfarbe: #FFF4F8;
}
.main_head Schriftart{
Schriftgröße: 13px;
Farbe: #808080;
Rand oben: 5px;
}
.Hauptinhalt{
Breite: 310px;
Rahmen oben: 1px durchgezogen #808080;
}
.Hauptinhalt ul{
Rand links: -30px;
Rand oben: 5px;
Breite: 290px;
}
.main_content ul li{
Listenstiltyp: keiner;
Schriftgröße: 13px;
Farbe: #2464B2;
border-bottom:1px gepunktet #808080;
Zeilenhöhe: 27px;
}
.main_content ul li a{
Schriftgröße: 13px;
Farbe: #2464B2;
Textdekoration: keine;
}
.main_content ul li a:hover{
Textdekoration: Unterstreichen;
}
#main div ul.main_content_chang{
Breite: 290px;
Position: relativ;
z-Index: 100;
oben: 0px;
links: 0px;
Anzeige:Block;
}
#main div ul {
Position: relativ;
Anzeige: keine;
}
</Stil>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<Skripttyp="text/javascript">
$(Funktion(){
$(".chang").jeweils(Funktion(Index){
$(diese).klick(Funktion(){
$(this).css("Hintergrundfarbe","#E02D29");
$(this).siblings("div").css("Hintergrundfarbe","#fff");
$("#main div ul").removeClass("main_content_chang");
$(".main_content ul:eq("+index+")").anzeigen().geschwister("ul").ausblenden();
})
})
})
</Skript>
</Kopf>
<Text>
<div id="Haupt">
<div Klasse="Haupttitel">
<div class="chang" style="background:#E02D29">Hotspots in Echtzeit</div>
<div class="chang" style="float:right;">Siebentägige Aufmerksamkeit</div>
</div>
<div Klasse="Hauptinhalt">

<ul Klasse="Hauptinhalt ändern">
<li><img src="img/1_1.jpg"/> <a href="#">Ihr vom Star</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Personalisiert</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Allmächtiger Star Wars</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Jiaduobao wird Dutzende Millionen zahlen</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Mädchentoilette nach der Geburt</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">Die ganze Geschichte der tödlichen YTO-Express-Lieferung</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">Kopie von Cecilia Cheung</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Li Yanpeng lügt</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">170 Millionen Yuan Sparbuch</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">Ein Mädchen aus den 90ern ertränkte ihre eigene Tochter, um ihrem Freund zu gefallen</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">Vollständige Liste anzeigen</a></li>
</ul>

<ul>
<li><img src="img/1_1.jpg"/> <a href="#">Mysteriöses Schwert in Nanjing ausgegraben</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Gefälschte Heiratsurkunde vom Büro für Zivilangelegenheiten</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Walmart entschuldigt sich</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Mädchen kauft Haarnadeln</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Falscher Moutai erschwindelt Kredite in Höhe von 200 Millionen Yuan</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">Mann erhält Weihnachtsgeschenk von verstorbener Frau</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">Die 100 schönsten Frauen der Welt</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Meteorit 80 Millionen</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">Abe besucht den Yasukuni-Schrein</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">Bühne der Frühlingsfest-Gala freigelegt</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">Vollständige Liste anzeigen</a></li>
</ul>
</div>
</div>
</body>
</html>

Ergebnisse:

<<: Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung

>>: WeChat Mini-Programme werden global über die Uni-App geteilt

Tiefes Verständnis der JavaScript-Syntax und Codestruktur

HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Tiefes Verständnis der JavaScript-Syntax und Codestruktur

Analyse der Gründe, warum MySQL-Felddefinitionen nicht null verwenden sollten

Verwendung der MySQL-Anweisung „truncate table“

Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

20 JS-Abkürzungsfähigkeiten zur Verbesserung der Arbeitseffizienz

HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren

Eine detaillierte Darstellung des Prozesses zum Erklimmen einer Grube des Docker-Bereitstellungsdienstes

So stellen Sie MySQL- und Redis-Dienste mit Docker bereit

Detaillierte Erläuterung des Svelte-Implementierungsprinzips für eine einfache und unkomplizierte JavaScript-Entwicklung

Artikel empfehlen

Tiefgreifendes Verständnis der Eigenschaft „Vertical-Align“ und grundlegender Probleme in CSS

JavaScript-Sandbox-Erkundung

Perfekte Lösung für den Themenwechsel basierend auf CSS-Variablen (empfohlen)

Docker-Praxis: Python-Anwendungscontainerisierung

So installieren Sie Docker auf Ubuntu20.04 LTS

Detaillierte Erklärung der neuen Erfahrung von Vite

So konvertieren Sie MySQL horizontal in vertikal und vertikal in horizontal

Kopieren von Node.js-Dateien, Erstellen von Ordnern und andere damit verbundene Vorgänge

Websocket+Vuex implementiert eine Echtzeit-Chat-Software

CSS-Beispielcode zum Zeichnen eines Lutschers

Mac+IDEA+Tomcat-Konfigurationsschritte

Beispiel für die JavaScript-Funktion „CollectGarbage“

Eine kurze Erläuterung der HTML-Tabellen-Tags

Verwendung von benutzerdefinierten Nginx-Variablen und integrierten vordefinierten Variablen

Detaillierte Erläuterung der Vue-Projektverpackung