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

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

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

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

MySQL-Onlineprobleme mit langsamem Log und Optimierungslösungen

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Verwenden von System.Drawing.Common in Linux/Docker

Die Rolle der neuen Feature-Window-Funktionen von MySQL 8

Einfache Implementierung von Mysql-Anweisungen zum Hinzufügen, Löschen, Ändern und Abfragen

So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an

Detaillierte Erklärung der Verwendung von 5 verschiedenen Werten der CSS-Position

Implementierung der automatischen Konstruktionsweiterleitung von React

So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel

Artikel empfehlen

Neues CSS3-Layout: ausführliche Flex-Erklärung

CSS3-Radarscan-Kartenbeispielcode

So richten Sie das Terminal so ein, dass Anwendungen nach dem Start von Ubuntu ausgeführt werden

Lernen Sie, wie Sie mit charAt() in JavaScript die am häufigsten vorkommenden Zeichen und deren Anzahl zählen.

Eine Liste der Fallstricke beim regulären JS-Matching

docker-maven-plugin verpackt das Image und lädt es in ein privates Warehouse hoch

Tutorial zur Installation von MySQL auf Alibaba Cloud Centos 7.5

Lösung für das Problem des unzureichenden Speicherressourcenpools des Docker-Servers

Zusammenfassung zum horizontal scrollenden Website-Design

Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen

MySQL Server 8.0.3 Installations- und Konfigurationsmethoden - Grafisches Tutorial

MySQL-Konfiguration Master-Slave-Server (ein Master und mehrere Slaves)

Lösungen für ungültige Nullsegmentbeurteilungen und IFNULL()-Fehler in MySql

Tutorial zum Verbinden und Verwenden von MySQL 8.0 im Maven-Projekt von IDEA

Detaillierte Erläuterung der Befehle zum Lesen und Schreiben von Remotedateien mit Vim im Linux-System