tab切换（用jQuery实现）?

article/2025/9/1 2:14:09

页面中经常用到的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.active {background-color:#23A8F2;border-radius:5px 5px 0px 0px;color:#fff;}.app_div_box {width:100%;height:420px;border:1px solid #ccc;}.app .app_div_box_item {height:200px;font-size:15px;display:none;}
</style>
</head>
<body>
<div class="app"><div class="app_div_tab"><ul></ul></div><div class="app_div_box"></div>
</div><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>//模拟后台-tab中的数据var arr = [{id:0,name:"html+css",content:'内容1',},{id:1,name:"javascript",content:'内容2',},{id:2,name:"jQuery",content:'内容3',},{id:3,name:"BootStrap",content:'内容4',},{id:4,name:"Node",content:'内容5',},{id:5,name:"Vue",content:'内容6',},{id:6,name:"React",content:'内容7',},];$(".app_div_tab ul").empty(); //从被选元素中删除子元素$(".app_div_box").empty(); //从被选元素中删除子元素for(var i=0;i<arr.length;i++){var li = '<li>'+arr[i].name+'</li>';var div= '<div class="app_div_box_item">'+arr[i].content+'</div>'if(i==0) {var li = '<li class="active">'+arr[i].name+'</li>';var div= '<div class="app_div_box_item" style="display:block;">'+arr[i].content+'</div>'$(".app_div_tab ul").append(li);$(".app_div_box").append(div);} else {$(".app_div_tab ul").append(li);$(".app_div_box").append(div);} }$(document).on("click",".app .app_div_tab ul li",function() {var i = $(this).index();$(this).addClass("active").siblings().removeClass("active");$(".app .app_div_box_item").eq(i).show().siblings().hide()});
</script>
</body>
</html>

考察点

1.jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

2.jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

3.jQuery on() 方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。