前端之Tab切换

一、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tab栏目仿写</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      list-style: none
    }
    .container{
      margin: 200px 100px;
      border: 1px solid #015293;
      width: 70%;
      height: 400px;
    }
    .side{
      width: 20%;
      margin: 10px 10px;
      float: left;
    }
    #tab li{
      padding: 20px 0;
      margin-top: 10px;
      color: #015293;
      background: #ECF8F8;
      border-radius: 15px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
      position: relative;
    }
    /* #tab li:hover{
      color: #FFF;
      background: #015293;
    } */
    .hov:after{
      content: '';
      border: 15px solid transparent;
      border-left: 15px solid #015293;
      position: absolute;
      top: 15px;
      right: -26px;
    }
    #content{
      border: 1px solid #E8E8E8;
      width: 75%;
      height: 360px;
      margin: 20px 10px;
      float: left;
    }
    #content>div{
      display: none;
    }
    /* .tex{
      display: none;
    } */
    .nohide{
      display: block !important;
      font-weight: bold;
    }
    .nohide p{
      text-indent: 2em;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="side">
    <ul id="tab">
      <li>走进焦作</li>
      <li>要闻动态</li>
      <li>政务公开</li>
      <li>政务服务</li>
      <li>政民互动</li>
    </ul>
  </div>
  <div id="content">
    <div class="nohide">
      <p>
        1
      </p>
    </div>
    <div class="tex">
      <p>
        2
      </p>
    </div>
    <div class="tex">
      <p>
        3
      </p>
    </div>
    <div class="tex">
      <p>
        4
      </p>
    </div>
    <div class="tex">
      <p>
        5
      </p>
    </div>
  </div>
</div>
<script>
  var tabs=document.getElementById('tab').getElementsByTagName('li');
  var sen=document.getElementById('content').getElementsByTagName('div');
  for (var i=0;i<tabs.length;i++){
    tabs[i].onmouseover=function(){
      change(this);
    }
  }
  function change(obj){
    for (var i=0;i<tabs.length;i++){
      if(tabs[i]===obj){
        tabs[i].className="hov";
        tabs[i].style.color="#FFF";
        tabs[i].style.background="#015293";
        sen[i].className="nohide";
      }
      else{
        tabs[i].style.color="#015293";
        tabs[i].style.background="#ECF8F8";
        tabs[i].className='';
        sen[i].className='';
      }
    }
  }
</script>
</body>
</html>

二、效果

©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值