自动切换的tab标签代码

最新推荐文章于 2023-08-09 19:45:10 发布

weixin_34071713

最新推荐文章于 2023-08-09 19:45:10 发布

阅读量123

点赞数 1

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/lixiaoyan/blog/670971

版权

2019独角兽企业重金招聘Python工程师标准>>>

//html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <script type="text/javascript" src='js/index.js'></script>
    </head>
    <body>
      <!-- tab标签代码begin -->
      <div id="tab1">
        <div>
          <ul>
            <li>娱乐新闻</li>
            <li>体育新闻</li>
            <li>国际新闻</li>
            <li>国内新闻</li>
          </ul>
        </div>
        <div>
          <div>娱乐新闻</div>
          <div>体育新闻</div>
          <div>国际新闻</div>
          <div>国内新闻</div>
        </div>
      </div>
      <!-- tab标签代码end -->
    </body>
</html>

//css
/*
* @Author: lixiaoyan
* @Date:   2016-05-06 13:45:33
* @Last Modified by:   Administrator
* @Last Modified time: 2016-05-06 16:31:02
*/
*{
  padding: 0;
  margin: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
.tab1{
  width: 400px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
}
.menu{
  width: 100%;
  height: 29px;
  border-right: 1px solid #ccc;
}
.menu li{
  float: left;
  text-align: center;
  font: 400 14px/29px '微软雅黑';
  background-color: #e0e2eb;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 99px;
  cursor: pointer;
  /*overflow: hidden;*/
}
.menu li.curr{
  font-weight: 700;
  color: red;
  border-bottom: none;
  background-color: #fff;
}
.menudiv{
  /*如果不写width： 100%，那么他继承父盒子的width，如果写上width：100%，那么他的content等于父盒子的宽度，border或者padding另外算，除非你写上box-sizing：border-box*/
  /*width: 100%;*/
  height: 200px;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.menudiv div{
  width: 100%;
  height: 200px;
  padding: 5px;
  display: none;
}
.menudiv .show{
  display: block;
}

//js
/*
 * @Author: Administrator
 * @Date:   2016-05-06 13:46:03
 * @Last Modified by:   Administrator
 * @Last Modified time: 2016-05-06 16:31:56
 */

'use strict';
window.onload = function() {
  //获取tab1元素
  var tab1 = document.getElementById("tab1");
  console.log(tab1);
  //获取tab1元素的第一个子节点menu元素，在获取她下边的ul元素，在获取它下边的所有的li元素的集合
  var lis = tab1.children[0].children[0].children;
  console.log(lis);
  //获取tab1下边的第二个子元素menudiv，在获取它下边的所有的div元素的集合
  var menudivs = tab1.children[1].children;
  console.log(menudivs);

  for (var i = 0, len = lis.length; i < len; i++) {
    lis[i].index = i;
    lis[i].onmouseover = function() {
      for (var j = 0, len = menudivs.length; j < len; j++) {
        lis[j].className = '';
        menudivs[j].className = '';
      }
      this.className = 'curr';
      console.log(this.index);
      console.log(menudivs[this.index]);
      menudivs[this.index].className = 'show';
    }
  }
}

转载于:https://my.oschina.net/lixiaoyan/blog/670971