作者:mandy
1.实现效果
2.html部分:
<div id="ifrContentId"></div>
3.js部分
$(document).ready(function () {
$.ajax({
url:"./json/tab_General.json", //tab数据存储在json中
type:"get",
dataType:'json',
success: function(data){
var dataList=data.data[0].subset;
var ifrId = document.getElementById("ifrContentId");
for (let value of dataList) {
var tabName=value.name;
//循环获取tab名称显示在页面上
var title="<div class='subtab"+" "+ tabName +" "+value.selected+"' name='"+value.name+"'><a href='#'>"+value.text+"</a></div>";
$("#tab_Gnenral").append(title);
//默认显示第一个tab也内容
if(value.text=="tab1") {
var content="<div class='iframe-container"+" "+value.name+ "-iframe" +" "+value.done+"'><iframe src='"+value.href+"' height='2200' width='800'></iframe></div>";
$("#ifrContentId").empty().append(content);
}
//获取所有tab名称
var res = document.getElementsByClassName('subtab');
for(var i=0;i<res.length;i++){
//给每个tab添加click事件,点击每个tab选项卡显示该选项卡的页面内容
res[i].addEventListener('click',function(e){
if($(this)[0].innerText==value.text) {
var content = "<div class='iframe-container" + " " + value.name + "-iframe" + " " + value.done + "'><iframe height='2200' width='800' src='" + value.href + "' ></iframe></div>";
$("#ifrContentId").empty().append(content); //empty()方法删除匹配元素的所有子节点,解决页面切换,内容不变的问题
}
}, false);
}
}
}
});
})
4.json
{
"data": [
{
"name": "tab",
"subset": [
{
"text": "tab1",
"name": "overview",
"visible": "true",
"href": "https://www.infervision.com/zh-cn",
"selected": "selected",
"done": "done"
},
{
"text": "tab2",
"name": "members",
"visible": "true",
"href": "https://www.hao123.com/",
"selected": "",
"done": ""
},
{
"text": "tab3",
"name": "payments",
"visible": "true",
"href": "https://nodejs.org/en/docs/",
"selected": "",
"done": ""
},
{
"text": "tab4",
"name": "rejection",
"visible": "true",
"href": "https://nodejs.org/en/blog/",
"selected": "",
"done": ""
},
{
"text": "tab5",
"name": "diagnosis",
"visible": "true",
"href": "https://nodejs.org/en",
"selected": "",
"done": ""
}
]
}
]
}