JavaScript实现tab栏切换 jquery实现tab栏切换 的方法的对比

这个例子比较简单，但却很实用，当然实际工作中我们一般不会这样去写，我们通常会把以此为基础去封装一个可重用的控件，但基本思想不变。

JavaScript实现tab栏切换

在JavaScript中实现Tab切换的基本逻辑是通过监听每个Tab的点击事件，然后隐藏所有的内容区域，并显示对应于点击的Tab的内容区域。以下是一个简单的实现示例：

HTML结构：

<div class="tabs">
  <div class="tab" οnclick="changeTab(0)">Tab 1</div>
  <div class="tab" οnclick="changeTab(1)">Tab 2</div>
  <div class="tab" οnclick="changeTab(2)">Tab 3</div>
</div>
<div class="tab-content">
  <div class="content" style="display: block;">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
</div>

JavaScript代码：

function changeTab(index) {
  var i, tabs, contents;
  
  tabs = document.getElementsByClassName("tab"); // 获取所有的tab元素
  contents = document.getElementsByClassName("content"); // 获取所有的内容区域
 
  // 隐藏所有内容区域
  for (i = 0; i < contents.length; i++) {
    contents[i].style.display = "none";
  }
 
  // 移除所有tabs的活跃状态
  for (i = 0; i < tabs.length; i++) {
    tabs[i].className = tabs[i].className.replace(" active", "");
  }
 
  // 显示对应的内容区域并给当前tab加上活跃状态
  contents[index].style.display = "block";
  tabs[index].className += " active";
}

css样式

.tab.active, .content {
  display: block;
}
 
.content {
  display: none;
}

jquery实现tab栏切换

首先需要引用jquery.js文件

//本地引用
<script src="./js/jquery-1.11.1.min.js"></script>

HTML结构：

<div class="lineBox_tOP tab-header">
	<a class="active">tab1</a>
	<a class="destination_complain">tab2</a>
</div>							

JavaScript代码：

// tab选项
	$(document).ready(function() {
		$('.tab-header a').click(function() {
			var index = $(this).index();
			$('.tab-header a').removeClass('active');
			$(this).addClass('active');
			$('.tab-content .tab-item').removeClass('active');
			$('.tab-content .tab-item').eq(index).addClass('active');
		});
	});

使用.click()方法：这是最简单的方法，当用户点击某个元素时，会触发一个事件。

史上最全CSS命名规则总结及公用常见的CSS前端整理小知识
前端轮播图 动画 animate.css 使用工具 前端规范明说
简单易用的分页插件 原生HTML分页功能
uniapp tabbar底部中间凸起菜单 vue底部菜单的使用方法