<style type="text/css">
li{margin: 20px;list-style: none;}
div {margin: 20px;}
.s {display: none;}
</style>
<body>
<ul>
<li id="one1" onclick="setTab('one',1,3)" class="hover">个人首页</li>
<li id="one2" onclick="setTab('one',2,3)">个人信息</li>
<li id="one3" onclick="setTab('one',3,3)">个人动态</li>
</ul>
<div id="con_one_1" >这是个人首页</div>
<div id="con_one_2" class="s">这是个人信息</div>
<div id="con_one_3" class="s">这是个人动态</div>
</body>
<script type="text/javascript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
js的选项卡
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style type="text/css">
li{list-style: none; 80px;height: 30px;line-height: 30px;display: inline-block;background-color: #ccc;text-align: center;margin: 5px;}
.hover{background-color: gray;color: #fff;}
#div1{ 400px;height: 400px;background-color: darkgray;}
</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" v-bind:class="{hover:index==isok}" @click="isok=index">
{{item.name}}
</li>
</ul>
<div v-for="(item,index) in con" id="div1" v-show="isok==index">
{{item}}
</div>
</div>
</body>
<script type="text/javascript">
var vue=new Vue({
el:"#app",
data:{
isok:0,
list:[
{name:"个人主页"},
{name:"个人动态"},
{name:"个人相册"},
], //数组
con:["这是个人首页","这是个人动态","这是个人相册"] //数组
}
})
</script>
Vue 选项卡