使用js写tab点击事件
当然，可以使用JavaScript来处理选项卡（Tab）的点击事件。以下是一个完整的示例，展示了如何创建选项卡组件并处理点击事件：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Example</title>
<style>
.tab-container {
display: flex;
flex-direction: column;
width: 300px;
}
.tab-buttons {
display: flex;
justify-content: space-around;
}
.tab-button {
padding: 10px;
cursor: pointer;
}
.tab-content {
padding: 20px;
border: 1px solid #ccc;
}
.active {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="tab-buttons">
<div class="tab-button active" data-tab="tab1">Tab 1</div>
<div class="tab-button" data-tab="tab2">Tab 2</div>
<div class="tab-button" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content active" id="tab1">
Content for Tab 1
</div>
<div class="tab-content" id="tab2">
Content for Tab 2
</div>
<div class="tab-content" id="tab3">
Content for Tab 3
</div>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.getAttribute('data-tab');
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to the clicked button and corresponding content
this.classList.add('active');
document.getElementById(targetTab).classList.add('active');
});
});
});解释
- HTML部分:
- 创建了一个包含选项卡按钮和内容的容器。
- 每个选项卡按钮都有一个
data-tab属性，用于标识对应的内容区域。 - 初始状态下，第一个选项卡按钮和内容区域是激活状态（带有
active类）。
- CSS部分:
- 定义了选项卡按钮和内容区域的样式。
active类用于高亮显示当前激活的选项卡按钮和内容区域。
- JavaScript部分:
- 在文档加载完成后，为每个选项卡按钮添加点击事件监听器。
- 当点击某个选项卡按钮时，获取其
data-tab属性值，以确定要显示的内容区域。 - 移除所有选项卡按钮和内容区域的
active类，然后为点击的按钮和对应的内容区域添加active类。
应用场景
- 这种选项卡组件常用于网页中需要展示多个相关但独立的内容区域的场景，例如产品详情页的不同部分、设置页面的不同选项卡等。
优势
- 简洁：代码结构清晰，易于理解和维护。
- 灵活：可以轻松添加或删除选项卡，只需修改HTML结构和JavaScript代码。
- 可扩展：可以通过CSS进一步美化选项卡组件，以适应不同的设计需求。
希望这个示例能帮助你理解如何使用JavaScript处理选项卡的点击事件。如果有任何问题或需要进一步的解释，请随时提问！
相关·内容
1回答
选项卡内的复选框切换引导
、、、、
我正在尝试创建具有添加checkbox功能的选项卡，但随着data-toggle="tabs"的出现，checkbox似乎无法工作。有没有办法让复选框在标签内切换时起作用？
浏览 2提问于2020-01-10得票数 0
1回答
试着为制表符写点击事件，但不写working.How来写它？如果我单击要调用一个function.So的选项卡，如何将选择选项卡单击事件设置为选项卡component.If，请帮助查找解决方案。app.component.html： <my-tab [tabTitle]="'Tab 1'" (selectedtabclick)="test($event)">Tab</e
浏览 3提问于2020-01-31得票数 0
2回答
bootstrap中的选项卡导航
、、、、
我有引导标签导航，这是工作良好的页面index.php，目前当我点击非任何标签页面的网址保持不变，我希望知道有没有一种方法，我可以改变网页的网址，每当一个标签被点击时，我可以保持跟踪哪个标签是由用户选择tab=A </li> <a
浏览 4提问于2016-01-15得票数 0
3回答
="tab">Edit</a></li> <li><ahref="#tab3" data-toggle="tab&q
浏览 1提问于2014-12-26得票数 0
app.js title:'Tab 1', layoutwin1.open();
console.log('clicked');如果我点击/点击屏幕，点
浏览 0提问于2012-09-09得票数 1
回答已采纳
-0">Tab 1</a></li> </ul><div class="switcherContent 2
<div style="clear: both;&
浏览 5提问于2013-02-11得票数 1
回答已采纳
1回答
我发现‘一次点击触发2’，但它似乎不是我想要的-也许只是因为一次点击改变了两张幻灯片而不是标签。我想要一次点击切换标签在2个标签集。我的标签称为tab1、2和3以及legendtab1、2和3。('tab2').onclick = function() { <a href="#legendtab2" data-toggle="tab")Sprint</a>;('ta
浏览 0提问于2015-02-05得票数 0
2回答
我遇到了一个关于活动选项卡的问题，我使用.append()来构建选项卡，而不是使用href来连接选项卡的数据。我必须再次点击标签2，激活的标签会变成标签2。我没有看到任何人有同样的问题，所以希望有人能帮助我。谢谢。 <script src="https:/
浏览 3提问于2017-09-08得票数 0
我试着弄清楚“帮助”按钮是否触发了什么特殊的东西，我可以通过监听来触发我自己的函数。我知道有daPageLoad，并想知道还有什么其他的。
浏览 12提问于2021-05-20得票数 0
1回答
我使用是为了通过一个传送带执行一些操作。 <li class="js-tab">
<a class="product-tabs__link" href="#" data-index="0">A
浏览 14提问于2018-08-23得票数 0
回答已采纳
4回答
我有一些标签： <li><a href="#tab-allData">All data</a></li> <li><a href="#tab
浏览 5提问于2014-06-05得票数 3
回答已采纳
2回答
我使用的是jQuery和jQuery ui。下面是我的标记： <ul id="sortable"> <li class="button_tab</e
浏览 0提问于2012-05-11得票数 2
回答已采纳
在Optimizely中，我尝试做一些基本的点击事件。我知道Optimizely只在jQuery1.6上，所以使用on()，off()来处理事件是没用的。为了确保这一点，我使用了最基本的事件处理程序click(function(){ ... }));，但即使这样也不起作用。我被告知要使用windows.$，但在click()中，这种技术也不起作用。dir: 'top',
浏览 3提问于2012-10-01得票数 0
回答已采纳
6回答
console.log(tabname);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="tab active">Tab 1</d
浏览 8提问于2015-07-30得票数 0
回答已采纳
1回答
我正在为一个标签组件写一个测试，它应该通过x图标和鼠标中键点击来关闭标签。测试x图标是没有问题的，但是我很难触发这个鼠标中键事件。我原本希望它能和下面的代码一起工作： wrapper.find('.tab').trigger('click', { button: 1 }); 还尝试了： wrapper.find('.tab').trigger出于测试目的，我将close功能与普通的单击事件挂钩，这样测试就成功了。 这可能与我如何
浏览 34提问于2019-04-02得票数 0
-- Tabs --> <a href="#plots-tab" class="mdl-layout__tab is-active"">Plots</a>
<a href="#plots-data-tab" class="mdl-layout__tab">Pl
浏览 4提问于2015-10-20得票数 4
回答已采纳
vue菜鸟 请教如何实现
点击酒柜 出现酒柜的二级菜单 冰箱的隐藏<div id="app"> <liv-for="(item,index) in tabs" @click="tab--这里是js代码-->
浏览 1847提问于2017-11-24
2回答
我正在尝试创建一个onclick事件，该事件将显示/隐藏数组的元素，但是我正在与下面的showSubTabGroup()函数进行斗争。Sidenote:最终我想做这个onmouseenter和onmouseleave，而不是像下面这样‘点击’。 <script src="http://code.jquery.com/jquery-3.1.0.<
浏览 1提问于2016-10-21得票数 0
回答已采纳
我有一个有三个标签的站点，我试图根据点击的标签动态添加mouseover/mouseout事件，问题是mouseover/out事件似乎在被调用后被“绑定”到标签上。有没有办法将事件从选项卡中“解除绑定”？下面是我的js的样子{ $('#tab2').addClass('out
浏览 4提问于2010-07-23得票数 2
回答已采纳
我想在jQuery事件的动态选项卡中打开视图页面<li id="btnHtml">用于动态添加选项卡并在选项卡中打开视图页面的var tabs = $('#tabs').bootstrapDynamicTabs().addTab({ Url: '/
浏览 21提问于2019-08-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
