Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine Website mit Registerkarten mit HTML, CSS und jQuery
So erstellen Sie eine Website mit Registerkarten mit HTML, CSS und jQuery
- WBOYOriginal
- 2023-10-26 09:54:20705Durchsuche
So verwenden Sie HTML, CSS und jQuery, um eine Website mit Tabs zu erstellen
Heute stelle ich Ihnen vor, wie Sie HTML, CSS und jQuery verwenden, um eine Website mit Tabs zu erstellen. Tags können uns helfen, den Inhalt der Website effektiv zu organisieren und anzuzeigen und ein besseres Benutzererlebnis zu bieten. Unten finden Sie ein spezifisches Codebeispiel.
Zunächst erstellen wir mithilfe von HTML die Grundstruktur der Website. Wir benötigen einen übergeordneten Container, der die Registerkarte enthält, und erstellen darin einen Inhaltsblock, der der Registerkarte entspricht.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带有标签页的网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">标签1</a></li>
<li><a href="#tab2">标签2</a></li>
<li><a href="#tab3">标签3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<h2>标签1内容</h2>
<p>这是标签1的内容。</p>
</div>
<div id="tab2" class="tab">
<h2>标签2内容</h2>
<p>这是标签2的内容。</p>
</div>
<div id="tab3" class="tab">
<h2>标签3内容</h2>
<p>这是标签3的内容。</p>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>Als nächstes verwenden wir CSS, um unsere Tabs zu formatieren. Wir werden das Flex-Layout verwenden, um die Anordnung von Beschriftungen und Inhaltsblöcken sowie einige grundlegende Stile zu implementieren.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.tabs {
margin: 20px;
}
.tab-links {
display: flex;
list-style: none;
padding: 0;
}
.tab-links li {
margin-right: 10px;
}
.tab-links li a {
display: block;
padding: 10px;
background-color: #ccc;
text-decoration: none;
color: #000;
border-radius: 5px 5px 0 0;
}
.tab-links li.active a {
background-color: #fff;
}
.tab-content {
border: 1px solid #ccc;
padding: 10px;
border-radius: 0 5px 5px 5px;
}
.tab {
display: none;
}
.tab.active {
display: block;
}Abschließend werden wir jQuery verwenden, um den Label-Switching-Effekt zu erzielen.
$(document).ready(function() {
$(".tab-links li").click(function() {
var tabId = $(this).find("a").attr("href");
$(".tab").removeClass("active");
$(".tab-links li").removeClass("active");
$(this).addClass("active");
$(tabId).addClass("active");
});
});Jetzt haben wir eine fertige Website mit Tabs. Wenn wir auf verschiedene Registerkarten klicken, werden die entsprechenden Inhaltsblöcke angezeigt und andere Inhaltsblöcke ausgeblendet. Wir können je nach Bedarf weitere Tags und Inhaltsblöcke hinzufügen.
Ich hoffe, dieser Artikel ist hilfreich für Sie und ermöglicht Ihnen die einfache Erstellung einer Website mit Registerkarten mithilfe von HTML, CSS und jQuery. Wenn Sie Fragen haben, können Sie diese gerne stellen.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Website mit Registerkarten mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!