选项卡_csdn选项卡-CSDN博客

本文链接：https://blog.csdn.net/Girl_0919/article/details/73395688

关于选项卡效果

常规
传参（可设置多个参数值）
回调函数

下面是几种参考方法

常规方法


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{margin:0;padding:0;}
    ul,li{list-style: none;display: block;}
    .clearfix:after{height:0;display: block;clear: both;content: "";}
    .type{width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;}
    .type ul li{width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;}
    .content{width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;}
    .content p{display: block;height:400px;line-height: 400px;text-align: center;}
    .active{background: red!important;}//className
</style>
<body>
  <div class="type">
      <ul class="clearfix">
          <li class="active">新闻</li>
          <li>娱乐</li>
          <li>社会</li>
          <li>生活</li>
      </ul>
  </div>
<div class="content">
    <p style="display:block;">新闻内容</p>
    <p>娱乐内容</p>
    <p>社会内容</p>
    <p>生活内容</p>
</div>
</body>
<script>
    window.onload=function(){
    //获取
        var typeObj=document.getElementsByClassName("type")[0];
        var liArr=typeObj.getElementsByTagName("li");
        var content=document.getElementsByClassName("content")[0];
        var pArr=document.getElementsByTagName("p");
        for(var i=0;i<liArr.length;i++){
            liArr[i].index=i;//  自定义属性 
            liArr[i].onclick=function(){
                 // 将所有样式恢复到初始状态
                for(var j=0;j<pArr.length;j++){
                    pArr[j].style.display="none";
                    liArr[j].className=""
                }
                //点击时的状态
                this.className="active";
               pArr[this.index].style.display="block";
            }
        }
    }
</script>
</html>

传参（1）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{margin:0;padding:0;}
    a{display:inline-block;width:100px;height:40px;line-height: 40px;text-align: center;text-decoration: none;margin-right:5px;}
    section{width:250px;height: 100px;line-height:100px;text-align:center;background: blanchedalmond;}
    #salemain{display:none;}
    .active{background:red!important;}
</style>
<body>
    <div id="type" >
        <a href="#" class="active">生产线</a>
        <a href="#">销售线</a>
    </div>
    <section id="promain">
        我是生产线宝宝
    </section>
    <section id="salemain">
        我是销售线麻麻
    </section>
</body>
<script>
   //onclick=(形参)(实参)
   window.onload=function (){
       var aArr=document.getElementsByTagName("a");
       var secArr=document.getElementsByTagName("section");
       for(var i=0;i<aArr.length;i++){
           aArr[i].onclick=(function(x){  // 点击谁谁显示block  背景变改变className
               return function(){
                   for(var j=0;j<secArr.length;j++){
                       aArr[j].className="";
                       secArr[j].style.display="none";
                   }
                   secArr[x].style.display="block";
                   aArr[x].className="active";
               }
           })(i)
       }
   }
</script>
</html>

传参（2）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;display: block;}
        .clearfix:after{height:0;display: block;clear: both;content: "";}
        .type{width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;}
        .type ul li{width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;}
        .content{width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;}
        .content p{display: none;height:400px;line-height: 400px;text-align: center;}
        .active{background: red!important;}
    </style>
</head>
<body>
<div class="type">
    <ul class="clearfix">
        <li onclick="tab('con1')" class="active">新闻</li>
        <li onclick="tab('con2')">娱乐</li>
        <li onclick="tab('con3')">社会</li>
        <li onclick="tab('con4')">生活</li>
    </ul>
</div>
<div class="content">
    <p id="con1" style="display:block;">新闻内容</p>
    <p id="con2">娱乐内容</p>
    <p id="con3">社会内容</p>
    <p id="con4">生活内容</p>
</div>
</body>
<script>
    function tab(tabNum){
        var conArr=["con1","con2","con3","con4"]
        var liArr=document.getElementsByTagName("li")
        for(var i=0;i<conArr.length;i++){
            if(conArr[i]==tabNum){
                document.getElementById(conArr[i]).style.display="block";
                liArr[i].className="active";
            }else{
                document.getElementById(conArr[i]).style.display="none";
                liArr[i].className="";
            }
        }
    }
</script>
</html>

回调

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        ul,li{list-style: none;display: block;}
        .clearfix:after{height:0;display: block;clear: both;content: "";}
        .type{width:450px;margin:50px auto;border:1px solid #000001;margin-bottom: 5px;}
        .type ul li{width:100px;float: left;margin-right: 10px;text-align:center;background:#ccc;height:30px;line-height: 30px;cursor: pointer;}
        .active{background: red!important;}
        .content{width:450px;margin:0 auto;border:1px solid #000001;height:400px;overflow: hidden;}
        .content p{height:400px;line-height: 400px;text-align: center;}
    </style>
</head>
<body>
<div class="type">
    <ul class="clearfix">
        <li class="active">新闻</li>
        <li>娱乐</li>
        <li>社会</li>
        <li>生活</li>
    </ul>
</div>
<div class="content">
    <p style="display:block;">新闻内容</p>
    <p>娱乐内容</p>
    <p>社会内容</p>
    <p>生活内容</p>
</div>
</body>
<script>
   var liArr=document.getElementsByTagName("li");
   var pArr=document.getElementsByTagName("p");
    for(var i=0;i<liArr.length;i++){
        liArr[i].onclick=function(){
            change(this);
        }
    }
    function change(clickObj){
        for(var j=0;j<liArr.length;j++){
            if(liArr[j]==clickObj){
                liArr[j].className="active"
                pArr[j].style.display="block";
            }else{
                liArr[j].className=""
                pArr[j].style.display="none";
            }
        }
    }
</script>
</html>