zoukankan      html  css  js  c++  java
  • 几种tab切换尝试 原生js

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
    * {padding: 0;margin: 0;}
      li {list-style: none;}
    .wrapper {
      margin: 0 auto;
       100%;
      max- 1140px;
    }
    .tabbox {
      margin: 40px auto;
       400px;
      height: 200px;
      border: 1px solid #f70;
      overflow: hidden;

    }
    .tabbox .tab-tit{
      position: relative;
      height: 40px;
    }
    ul {
      position: absolute;
      left: -1px;
       401px;
      height: 40px;
      line-height: 40px;
      background-color: #eaeaea;
    }
    ul li {
      float: left;
      border-left: 1px solid #f70;
      border-bottom: 1px solid #f70;
      text-align: center;
       99px;
      height: 40px;
      overflow: hidden;
    }
    .clear {clear: both;}
    .select {
      padding-right: 1px;
      border-bottom: none;
      background-color: #fff;
    }
    a:link, a:visited {
      font-size: 16px;
      font-weight: bold;
      color: #888;
      text-decoration: none;
    }
    .select a {
      color: #333;
    }
    a:hover, a:active {
      color: #f20;
      font-weight: bold;
    }
    .tab-txt {
       400px;
      padding: 40px;
      overflow: hidden;
    }
    .demo {display: none;}
    .tab-txt p {
      line-height: 40px;
    }

    </style>
    </head>
    <body>
      <div class="wrapper">
        <div id="tabBox" class="tabbox">
          <div id="tabTit" class="tab-tit">
            <ul>
              <li class="select"><a href="javascript:;">女枪</a></li>
              <li><a href="javascript:;">提莫</a></li>
              <li><a href="javascript:;">盖伦</a></li>
              <li><a href="javascript:;">剑圣</a></li>
            </ul>
          </div>
    <!-- <div class="clear"></div> -->
        <div id="tabTxt" class="tab-txt">
          <div class="demo" style="display: block;">
            <p>我有两把枪,一把叫射,另一把叫,啊~</p>
            <p>你有一双迷人的眼睛,我非常喜欢!</p>
          </div>
          <div class="demo">
            <p>我去前面探探路</p>
            <p>提莫队长正在待命!</p>
          </div>
          <div class="demo">
            <p>放马过来吧,你会死的很光荣的!</p>
            <p>快点儿结束吧,我头有点儿转晕了……</p>
          </div>
          <div class="demo">
            <p>我的剑就是你的剑。</p>
            <p>眼睛多,看东西才会更加清楚</p>
          </div>

        </div>
      </div>

    </div>


    <script type="text/javascript">
    function $(id) {
      return typeof id === "string" ? document.getElementById(id) : id;
    }
    window.onload = function() {
      var tits = $("tabTit").getElementsByTagName("li");
      var txts = $("tabTxt").getElementsByClassName("demo");
      if(tits.length != txts.length) {return;}
      for(var i=0,l=tits.length; i<l; i++) {
        tits[i].id = i;
        tits[i].onmouseover = function() {
          for(var j=0; j<l; j++) {
          tits[j].className = "";
          txts[j].style.display = "none";
         }
        this.className = "select";
        txts[this.id].style.display = "block";
      }
    }

    </script>
    </body>
    </html>

  • 相关阅读:
    java 时间操作
    springboot-helloworld 学习02
    springboot-helloworld 学习01
    java知识图谱
    python day100-[day41-45]-5 web-django RESTful架构和DRF入门
    python day100-[day41-45]-4 web-django 前后端分离
    hive mysql count distinct 多列
    hive 导出数据到文件
    使用npm i 编译vue项目出现无法拉取clone github.com中的源文件
    windows环境下elasticsearch安装教程 (版本为7.12.0)
  • 原文地址:https://www.cnblogs.com/0liaoyi/p/6372486.html
Copyright © 2011-2022 走看看