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");//得到三个input标签的集合
    var divs=document.querySelectorAll("#wrap div");//得到下方三个div小盒子的集合
    var index=0;   
    btns[index].className="active";
    for(var i=0;i<btns.length;i++){  //for循环遍历按钮input标签
        divs[i].style.display="none";
        btns[i].index=i;//通过给input标签添加index属性来记录当前下标
        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");//得到三个input标签的集合
    var divs=document.querySelectorAll("#wrap div");//得到下方三个div小盒子的集合
    var index=0;   
    btns[index].className="active";
    for(var i=0;i<btns.length;i++){  //for循环遍历按钮input标签
        divs[i].style.display="none";//将所有div小盒子都隐藏起来
        btns[i].onclick=(function(i){//给input标签添加点击事件（异步）
            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;//通过改变index的值来实现切换
                   hide();
                   show();
                }
            })(i);
        }
    }
    // 让当前具有index下标的div显示,给input标签添加active类
    function show(){
        btns[index].className="active";
        divs[index].style.display="block";
    }
    // 隐藏div,取消input标签的active类
    function hide(){
        for(var i=0;i<btns.length;i++){
            btns[i].className=null;
            divs[i].style.display="none";
        }
    }
</script>

2.Vue.js

  • 2.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>
    <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>
  • JS页面
<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>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue