tab切换（用jQuery实现）?

八点玩转前端

已于 2022-08-17 11:02:41 修改

阅读量1.7k

点赞数

分类专栏： jQuery 文章标签： jquery 前端

于 2022-08-17 10:38:16 首次发布

本文链接：https://blog.csdn.net/weixin_45651609/article/details/126368456

版权

页面中经常用到的tab栏，来分类展示内容

我认为掌握tab栏切换算是从静态页面到动态页面所迈出的第一步，并且在以后的工作中(jQuery框架开发)会作为jQuery中的常用事件和方法，反复的使用，所以掌握tab栏切换至关重要！！！

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jQuery tab切换</title> 
<style> 
	body,blockquote,ul,li,h1,h2,h3,h4,h5,p,textarea,form,table,tr,td,input,button,div,dd,dt,dl{
   
		margin:0;
		padding:0;
	}
	li {
   
		list-style:none;
	}
	.app {
   
		width:1200px;
		margin:20px auto;
	}
	.app .app_div_tab ul {
   
		display:flex;
	}
	.app .app_div_tab ul li {
   
		width:120px;
		height:40px;
		line-height:40px;
		text-align:center;
		background-color:#fff;
		color:#000;
	}
	.app .app_div_tab ul li.