1.原生javaScript
方法1:
<head>
<meta charset="UTF-8">
<style>
#wrap input{margin:5px;padding:5px;}
#wrap input.active{background:red;}
#wrap div{width:100px;height:100px;background:aquamarine;}
</style>
<title>选项卡</title>
</head>
<body>
<div id="wrap">
<input type="button" value="一">
<input type="button" value="二">
<input type="button" value="三">
<div>星期一</div>
<div>星期二</div>
<div>星期三</div>
</div>
</body>
<script>
var btns=document.querySelectorAll("#wrap input");
var divs=document.querySelectorAll("#wrap div");
var index=0;
btns[index].className="active";
for(var i=0;i<btns.length;i++){
divs[i].style.display="none";
btns[i].index=i;
btns[i].onclick=function(){
for(var j=0;j<btns.length;j++){
btns[j].className=null;
divs[j].style.display="none";
}
btns[this.index].className="active";
divs[this.index].style.display="block";
}
}
divs[index].style.display="block";
</script>
方法2:
HTML页面同上
<script>
var btns=document.querySelectorAll("#wrap input");
var divs=document.querySelectorAll("#wrap div");
var index=0;
btns[index].className="active";
for(var i=0;i<btns.length;i++){
divs[i].style.display="none";
btns[i].onclick=(function(i){
return function(){
for(var j=0;j<btns.length;j++){
if(j!==i){
btns[j].className=null;
divs[j].style.display="none";
}else{
btns[j].className="active";
divs[j].style.display="block";
}
}
}
})(i);
}
divs[index].style.display="block";
</script>
方法3:
<script>
var btns=document.querySelectorAll("#wrap input");
var divs=document.querySelectorAll("#wrap div");
var index=0;
init();
function init(){
hide();
show();
for(var i=0;i<btns.length;i++){
btns[i].onclick=(function(i){
return function(){
index=i;
hide();
show();
}
})(i);
}
}
function show(){
btns[index].className="active";
divs[index].style.display="block";
}
function hide(){
for(var i=0;i<btns.length;i++){
btns[i].className=null;
divs[i].style.display="none";
}
}
</script>
2.Vue.js
<head>
<meta charset="UTF-8">
<style>
#wrap input{margin:5px;padding:5px;}
#wrap input.active{background:red;}
#wrap div{width:100px;height:100px;background:aquamarine;}
</style>
<title>选项卡</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="myApp">
<div id="wrap">
<!--通过点击进行index值的修改-->
<input type="button" value="一" :class="{active:index===0}" @click="index=0">
<input type="button" value="二" :class="{active:index===1}" @click="index=1">
<input type="button" value="三" :class="{active:index===2}" @click="index=2">
<!--通过判断index值是否与自身赋好的值相等进行相对应的显示-->
<div v-show="index===0">星期一</div>
<div v-show="index===1">星期二</div>
<div v-show="index===2">星期三</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#myApp',
data:{
index:0
}
})
</script>
- 2.2加强版–选项卡–使用Vue进行数据渲染
- html页面
<head>
<meta charset="UTF-8">
<title>tab选项卡---使用Vue进行数据渲染</title>
<style>
#myApp input{ margin:5px;padding:5px;}
#myApp input.active{background:red;}
#myApp div{width:400px;height:300px;background:aquamarine;}
</style>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="myApp">
<input type="button" v-for="(v,i) in newInfo" :value="v.typeName" :class="{active:index===i}" @click="index=i">
<div v-for="(item,i) in newInfo" v-show="index===i">
<p v-for="info in item.newList">
<a :href="info.url">{{info.title}}</a>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:'#myApp',
data:{
index:0,
newInfo:[
{
typeName:"军事",
newList:[
{
title:"美国发誓“毫不留情”对抗伊朗",
url:"http://news.ifeng.com/a/20181107/60149207_0.shtml?_zbs_baidu_news"
},
{
title:"普京主动送给中国一大宝贝 白宫:必须制止",
url:"http://hot.qianyan001.com/20181108/787511_1.html"
}
]
},
{
typeName:"娱乐",
newList:[
{
title:"众星出席时装电影盛典 周迅赵薇baby杨幂唐嫣同框",
url:"http://fun.youth.cn/gnzx/201811/t20181108_11778380.htm"
},
{
title:"张艺兴发博回应海外人气质疑:榜单见不如舞台见",
url:"http://new.qq.com/omn/20181107/20181107A0UQZ9.html"
},
{
title:"昆凌晒照带儿女秋日游玩 周杰伦委屈评论:也不带我",
url:"http://ent.ifeng.com/a/20181108/43134878_0.shtml"
}
]
},
{
typeName:"财经",
newList:[
{
title:"房价真跌了?2018年10月热点城市“房价地图”1",
url:"http://new.qq.com/zt/template/?id=FIN2018100800260300"
},
{
title:"房价真跌了?2018年10月热点城市“房价地图”2",
url:"http://new.qq.com/zt/template/?id=FIN2018100800260300"
},
{
title:"房价真跌了?2018年10月热点城市“房价地图”3",
url:"http://new.qq.com/zt/template/?id=FIN2018100800260300"
}
]
}
]
}
})
</script>