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

So verwenden Sie MySQL „group by“ und „order by“ gemeinsam

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Artikel

Was Sie über MySQL-Sperren wissen müssen

Artikel

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

So verwenden Sie MySQL „group by“ und „order by“ gemeinsam

Lösung zur Definition der Mindestspannweite hat keine Auswirkung

Mehrere beliebte Website-Navigationsrichtungen in der Zukunft

Informationen zum Konfigurationsproblem bei der Verbindung von MyBatis mit der MySql8.0-Version

Beispielcode zur Realisierung eines Buchseitenumblättereffekts mit CSS3

Drei Eigenschaften von Javascript-Objekten

Spezifische Verwendung von Vues neuem Spielzeug VueUse

So empfangen Sie einen binären Dateistream in Vue, um eine PDF-Vorschau zu realisieren

Detaillierte Erläuterung der Prinzipien und der Verwendung der MySQL-Master-Slave-Replikation und der Lese-/Schreibtrennung

Was Sie über MySQL-Sperren wissen müssen

Artikel empfehlen

Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung

Holen Sie sich die IP und den Hostnamen aller Hosts auf Zabbix

HTML-Formular und die Verwendung interner Formular-Tags

Lösen Sie das Problem verstümmelter chinesischer Zeichen, wenn Sie Daten von Tomcat unter Linux in MySQL einfügen

Die Prinzipien und Mängel der MySQL-Volltextindizierung

CocosCreator Erste Schritte Tutorial: Netzwerkkommunikation

Allgemeine Befehle für MySQL-Autorisierung, Start und Dienststart

Grafisches Tutorial zur Installation von Ubuntu 18.04 auf einer virtuellen VMware 15-Maschine

Lassen Sie IE6, IE7, IE8 CSS3-abgerundete Ecken und Schattenstile unterstützen

Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten

Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten

Detailliertes Tutorial zur Installation von MySQL 5.7.26 auf CentOS7.4

Docker-Cross-Server-Kommunikations-Overlay-Lösung (Teil 1) Consul-Einzelinstanz

Detaillierte Erklärung zur passiven Überprüfung des Überlebensstatus des Servers durch Nginx

Zusammenfassung der MySQL-Indexkenntnisse