Home >Web Front-end >JS Tutorial >How to make a tabbed website using HTML, CSS and jQuery
How to make a tabbed website using HTML, CSS and jQuery
- WBOYOriginal
- 2023-10-26 09:54:20705browse
How to use HTML, CSS and jQuery to make a website with tabs
Today, I will introduce to you how to use HTML, CSS and jQuery to make a tab page Websites with tabs. Tags can help us organize and display the content of the website effectively and provide a better user experience. Below is a specific code example.
First, we will use HTML to create the basic structure of the website. We need a parent container that contains the tab, and create a content block corresponding to the tab within it.
<!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>Next, we will use CSS to style our tabs. We will use flex layout to implement the arrangement of labels and content blocks, as well as some basic styling.
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;
}Finally, we will use jQuery to achieve the label switching effect.
$(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");
});
});Now, we have completed a website with tabs. When we click on different tabs, the corresponding content blocks will be displayed and other content blocks will be hidden. We can add more tags and content blocks according to our needs.
I hope this article will be helpful to you and enable you to easily use HTML, CSS and jQuery to create a website with tabs. If you have any questions, please feel free to ask.
The above is the detailed content of How to make a tabbed website using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!