JavaScript实现网页Tab切换的四种技术解析
87 浏览量
更新于2024-08-30
收藏 49KB PDF 举报
"JavaScript实现tab切换的四种方法"
在网页设计中，Tab切换是一种常见的交互设计模式，用于展示有限的空间内多组相关但互斥的信息。本文将介绍使用JavaScript实现Tab切换的四种方法。首先，我们来看一个基础的HTML结构和CSS样式，这是所有方法的基础：
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
float: left;
}
#tabCon {
clear: both;
}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<div id="tabCon">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
</div>
</div>
</body>
</html>
```
这个HTML结构包括一个`<ul>`列表作为标题，每个`<li>`元素代表一个标题；`#tabCon`内的`<div>`元素则分别对应每个标题下的内容。
### 方法一：点击标题切换内容
此方法通过JavaScript为每个标题添加点击事件，当点击某个标题时，对应的內容显示，其他内容隐藏。以下是实现代码：
```javascript
function tab(pid) {
var tabs = ["tab1", "tab2", "tab3", "tab4"];
for (var i = 0; i < 4; i++) {
if (tabs[i] == pid) {
document.getElementById(tabs[i]).style.display = "block";
} else {
document.getElementById(tabs[i]).style.display = "none";
}
}
}
// 绑定事件
var tabs = document.querySelectorAll('#tab ul li');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
tab(this.textContent);
});
}
```
在这个例子中，`tab`函数接收当前点击标题的文本作为参数，然后遍历所有内容区，根据标题文本来决定显示哪个内容。
### 方法二：使用CSS类切换
这种方法利用CSS的类选择器，通过JavaScript在点击标题时切换类名，以控制内容的显示与隐藏。首先，定义CSS样式：
```css
.tab-hidden {
display: none;
}
```
然后，修改JavaScript代码：
```javascript
function tab(pid) {
var tabs = ["tab1", "tab2", "tab3", "tab4"];
for (var i = 0; i < 4; i++) {
document.getElementById(tabs[i]).classList.remove('tab-visible');
document.getElementById(tabs[i]).classList.add('tab-hidden');
}
document.getElementById(pid).classList.remove('tab-hidden');
document.getElementById(pid).classList.add('tab-visible');
}
// 绑定事件
var tabs = document.querySelectorAll('#tab ul li');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
tab(this.textContent);
});
}
```
这里，我们使用了`classList`属性来添加和移除类名，从而控制内容的显示。
### 方法三：利用数据属性(data-*)和事件委托
这种方法利用HTML5的数据属性来关联标题和内容，同时使用事件委托来减少事件监听器的数量。HTML部分添加数据属性：
```html
<ul id="tab">
<li data-target="tab1">标题一</li>
<li data-target="tab2">标题二</li>
<li data-target="tab3">标题三</li>
<li data-target="tab4">标题四</li>
</ul>
```
JavaScript代码如下：
```javascript
document.getElementById('tab').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
var targetId = e.target.getAttribute('data-target');
var tabCon = document.getElementById('tabCon');
tabCon.querySelectorAll('div').forEach(function(content) {
content.style.display = content.id === targetId ? 'block' : 'none';
});
}
});
```
这里，我们监听`#tab`元素上的点击事件，然后检查触发事件的元素是否是`<li>`，如果是，则获取其数据属性`data-target`来决定显示哪个内容。
### 方法四：使用jQuery库
如果项目中已经引入了jQuery库，可以利用它的便利性简化代码：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#tab ul li').click(function() {
var target = $(this).data('target');
$('#tabCon div').hide();
$('#' + target).show();
});
});
</script>
```
jQuery提供了`data()`方法来获取数据属性，以及`hide()`和`show()`方法来控制元素的可见性。
以上就是JavaScript实现Tab切换的四种方法，每种方法都有其适用场景，可以根据项目的具体需求和技术栈来选择合适的方法。无论选择哪种方式，核心思想都是通过JavaScript来控制标题与内容的关联，实现点击标题时切换内容的显示状态。
javascript实现实现tab切换的四种方法切换的四种方法
tab切换在网页中很常见，故最近总结了4种实现方法。
首先，写出tab的框架，加上最简单的样式，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float:left;
}
#tabCon{
clear: both;
}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
<li>标题四</li>
</ul>
</div>
<div id="tabCon">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
<div>内容四</div>
</div>
</div>
</body>
</html>
现在的显示效果如下图：
四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；
点击标题二，内容二显示出来，其他内容不显示……
那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。
方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
</style>
<script>
function tab(pid){
var tabs=["tab1","tab2","tab3","tab4"];
for(var i=0;i<4;i++){
if(tabs[i]==pid){
下载后可阅读完整内容，剩余3页未读，立即下载
2020-12-06 上传
点击了解资源详情
2020-10-23 上传
2020-11-26 上传
2024-01-02 上传
2020-11-25 上传
2021-10-09 上传
weixin_38697579
- 粉丝: 4
- 资源: 928
我的内容管理
展开
最新资源
- C语言数组操作：高度检查器编程实践
- 基于Swift开发的嘉定单车LBS iOS应用项目解析
- 钗头凤声乐表演的二度创作分析报告
- 分布式数据库特训营全套教程资料
- JavaScript开发者Robert Bindar的博客平台
- MATLAB投影寻踪代码教程及文件解压缩指南
- HTML5拖放实现的RPSLS游戏教程
- HT://Dig引擎接口，Ampoliros开源模块应用
- 全面探测服务器性能与PHP环境的iprober PHP探针v0.024
- 新版提醒应用v2：基于MongoDB的数据存储
- 《我的世界》东方大陆1.12.2材质包深度体验
- Hypercore Promisifier: JavaScript中的回调转换为Promise包装器
- 探索开源项目Artifice：Slyme脚本与技巧游戏
- Matlab机器人学习代码解析与笔记分享
- 查尔默斯大学计算物理作业HP2解析
- GitHub问题管理新工具：GIRA-crx插件介绍
