文档章节

自动切换的tab标签代码

 青衫旧巷
发布于 2016/05/06 16:37
字数 453
阅读 5
收藏 0
//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';
    }
  }
}


© 著作权归作者所有

粉丝 1
博文 61
码字总数 35826
作品 0
东城
私信 提问
sublime、phpstrom编辑器快捷键汇总

sublime Ctrl+L 选择整行(按住-继续选择下行) Ctrl+KK 从光标处删除至行尾 Ctrl+Shift+K 删除整行 Ctrl+Shift+D 复制光标所在整行,插入在该行之前 Ctrl+J 合并行(已选择需要合并的多行时) C...

Corwien
2016/05/10
180
0
在Bootstrap开发中解决Tab标签页切换图表显示问题

在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面...

伍华聪
2018/07/12
0
0
tab页签切换----bootstrap

关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换,或是相关内容的页面导航: <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a h......

freedonn
2014/11/07
1K
0
AppCan移动平台教你多浮动窗口实现方法

基于AppCan移动平台开发APP,许多开发者会遇到多浮动窗口实现的问题,这里AppCan移动平台的小编为你归纳整理了4种常用的多浮动窗口实现方法,供移动app开发者们参考。 AppCan移动平台多浮动窗...

梅朵
2016/05/19
1K
0
Android界面开发之切换卡TabWidget用法

TabWidget类似Android中查看电话簿的界面,通过多个标签切换显示不同的内容。要实现这一效果,首先要了解TabHost ,它是一个用来存放多个Tab标签的容器。每一个Tab都可以对应自己的布局,比如...

鉴客
2011/11/22
29.1K
5

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部