页面中经常用到的tab栏，来分类展示内容
我认为掌握tab栏切换算是从静态页面到动态页面所迈出的第一步，并且在以后的工作中(jQuery框架开发)会作为jQuery中的常用事件和方法，反复的使用，所以掌握tab栏切换至关重要！！！
代码如下：
javascript
<!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() 方法。
4.jQuery addClass() 方法
addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
提示：如需添加多个类，请使用空格分隔类名。
5.jQuery removeClass() 方法
removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
6.jQuery 杂项 index() 方法
ndex() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注意：如果未找到元素，index() 将返回 -1。
7.jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素