仿京东做一个tab栏切换的网页，可以用原生js也可用JQuery
回答采用chatgpt:
HTML部分代码：
<div class="tab-header">
<ul>
<li class="active">首页</li>
<li>电视</li>
<li>电脑</li>
<li>手机</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-item active">这里是首页</div>
<div class="tab-item">这里是电视</div>
<div class="tab-item">这里是电脑</div>
<div class="tab-item">这里是手机</div>
</div>
CSS部分代码：
.tab-header ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
border-bottom: 1px solid #ccc;
font-size: 18px;
}
.tab-header ul li {
cursor: pointer;
padding: 10px;
color: #333;
}
.tab-header ul li.active {
color: #f00;
border-bottom: 2px solid #f00;
}
.tab-content .tab-item {
display: none;
padding: 20px;
}
.tab-content .active {
display: block;
}
JS部分代码：
// 原生JS实现
const tabHeaders = document.querySelectorAll('.tab-header ul li');
const tabItems = document.querySelectorAll('.tab-content .tab-item');
tabHeaders.forEach((tabHeader, index) => {
tabHeader.addEventListener('click', () => {
// 1. 移除所有标签的 active 类
tabHeaders.forEach((header) => {
header.classList.remove('active');
});
// 2. 当前标签加上 active 类
tabHeader.classList.add('active');
// 3. 显示对应的内容
tabItems.forEach((item) => {
item.classList.remove('active');
});
tabItems[index].classList.add('active');
});
});
// JQuery实现
$('.tab-header ul li').click(function () {
// 1. 移除所有标签的 active 类
$('.tab-header ul li').removeClass('active');
// 2. 当前标签加上 active 类
$(this).addClass('active');
// 3. 显示对应的内容
$('.tab-content .tab-item').removeClass('active');
var index = $(this).index();
$('.tab-content .tab-item:eq(' + index + ')').addClass('active');
});
以上就是一个简单的仿京东的tab栏切换页面了，希望能帮到您！
<!DOCTYPE html>
<html>
<head>
<title>Tab切换</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.tab {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f2f2f2;
height: 50px;
width: 100%;
}
.tab-header {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 50px;
}
.tab-header-item {
margin-right: 10px;
padding: 10px;
border: 1px solid #ddd;
cursor: pointer;
}
.tab-header-item.active {
background-color: #ddd;
border: 1px solid #ddd;
cursor: default;
}
.tab-content {
margin: 20px 50px;
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-header">
<div class="tab-header-item active" onclick="changeTab(0)">商品1</div>
<div class="tab-header-item" onclick="changeTab(1)">商品2</div>
<div class="tab-header-item" onclick="changeTab(2)">商品3</div>
</div>
</div>
<div class="tab-content active">这是商品1</div>
<div class="tab-content">这是商品2</div>
<div class="tab-content">这是商品3</div>
<script type="text/javascript">
function changeTab(index) {
// 隐藏所有tab内容
var tabContents = document.getElementsByClassName("tab-content");
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove("active");
}
// 显示选中的tab内容
var selectedTabContent = document.getElementsByClassName("tab-content")[index];
selectedTabContent.classList.add("active");
// 切换选中的tab
var tabHeaderItems = document.getElementsByClassName("tab-header-item");
for (var j = 0; j < tabHeaderItems.length; j++) {
tabHeaderItems[j].classList.remove("active");
}
tabHeaderItems[index].classList.add("active");
}
</script>
</body>
</html>
首先创建了一个包含所有Tab的Tab Header，以及一个包含所有Tab内容的Tab Content。我们使用CSS来设置它们的样式，并将所有Tab Content的初始显示状态设置为隐藏。
当用户点击Tab Header中的某个Tab时，我们调用一个名为changeTab的函数，该函数将隐藏所有Tab内容，然后显示选中的内容。它还将切换选中的Tab，并将被选中的Tab设置为活动状态，以便在用户选择其他Tab时重新应用正确的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab {
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.tab-header {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #f5f5f5;
padding: 5px;
}
.tab-item {
cursor: pointer;
padding: 5px 10px;
margin-right: 10px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.tab-item.active {
color: #fff;
background-color: #f40;
}
.tab-content {
padding: 10px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-header">
<div class="tab-item active" data-id="1">Tab 1</div>
<div class="tab-item" data-id="2">Tab 2</div>
<div class="tab-item" data-id="3">Tab 3</div>
</div>
<div class="tab-content">
<div class="tab-pane active" data-id="1">This is tab 1.</div>
<div class="tab-pane" data-id="2">This is tab 2.</div>
<div class="tab-pane" data-id="3">This is tab 3.</div>
</div>
</div>
</body>
<script>
// 获取tab元素
const tab = document.querySelector('.tab');
// 获取tab头部元素
const tabHeader = tab.querySelector('.tab-header');
// 获取tab内容元素
const tabContent = tab.querySelector('.tab-content');
// 获取所有tab项元素
const tabItems = tabHeader.querySelectorAll('.tab-item');
// 获取所有tab面板元素
const tabPanes = tabContent.querySelectorAll('.tab-pane');
// 遍历tab项元素，为每一个元素添加点击事件
tabItems.forEach((item) => {
item.addEventListener('click', () => {
// 获取当前tab项的data-id属性值
const id = item.getAttribute('data-id');
// 遍历所有tab面板元素，将它们的active类删除
tabPanes.forEach((pane) => {
pane.classList.remove('active');
});
// 遍历所有tab项元素，将它们的active类删除
tabItems.forEach((item) => {
item.classList.remove('active');
});
// 为当前tab项添加active类
item.classList.add('active');
// 获取当前tab项对应的tab面板元素
const pane = tabContent.querySelector(`.tab-pane[data-id="${id}"]`);
// 为当前tab面板添加active类
pane.classList.add('active');
});
});
</script>
</html>
// 与案例tab栏求换html,css相同
$(function () {
$('#wrapper').tabs({
tabHeads:'#tab-menu>li',
tabHeadsClass:'active',
tabBodys:'#tab-main>div',
tabBodysClass:'selected'
});
});
// 插件实现：jQuery-tabs.js
(function ($) {
/**
* 给$的原型添加tabs方法
* @param option.tabHeads 需要注册事件的页签们选择器
* @param option.tabHeadsClass 触发事件的页面要添加的类
* @param option.tabBodys 要显示的页面们选择器
* @param option.tabBodysClass 索引一致要显示的页面要添加的类.
*/
$.fn.tabs = function (option) {
var $bigDiv = this; //把this先存进$bigDiv变量中.
//通过参数传递过来的页签选择器,获取到这些页签. 给这些页面注册点击事件.
$bigDiv.find(option.tabHeads).on('click', function () {
//给当前鼠标点击的这个页签添加option.tabHeadsClass类,其他的兄弟页签移除这个类.
$(this).addClass(option.tabHeadsClass).siblings().removeClass(option.tabHeadsClass);
//获取当前点击的页面的索引
var idx = $(this).index();
//获取索引一致的页面,给他添加option.tabBodysClass, 其他的兄弟页面移除这个类.
$bigDiv.find(option.tabBodys).eq(idx).addClass(option.tabBodysClass).siblings().removeClass(option.tabBodysClass);
});
//返回值.
return $bigDiv;
}
}(window.jQuery));