<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab选项卡</title>

    <link href="CSS/index.css" rel="stylesheet">

    <script src="JS/index.js" type="text/javascript"></script>

</head>

<body>

<!--最外层-->

   <div id="tab">

       <!--头部-->

       <div id="tab-header">

           <ul>

               <li class="select">公告</li>

               <li>规则</li>

               <li>论坛</li>

               <li>安全</li>

               <li>公益</li>

           </ul>

       </div>

       <!--主要内容-->

       <div id="tab-content">

           <div class="dom" style="display: block">

               <ul>

                   <li>

                       <a href="#">数据七夕:金牛爱送玫瑰</a>

                   </li>

                   <li>

                       <a href="#">阿里打造"互联网监管"</a>

                   </li>

                   <li>

                       <a href="#">10万家店60万新品</a>

                   </li>

                   <li>

                       <a href="#">全球最大网上时装周</a>

                   </li>

               </ul>

           </div>

           <div class="dom">

               <ul>

                   <li>

                       <a href="#">“全额返现”要管控啦</a>

                   </li>

                   <li>

                       <a href="#">淘宝新规发布汇总(7月)</a>

                   </li>

                   <li>

                       <a href="#">炒信规则调整意见反馈</a>

                   </li>

                   <li>

                       <a href="#">质量相关规则近期变更</a>

                   </li>

               </ul>

           </div>

           <div class="dom">

               <ul>

                   <li>

                       <a href="#">阿里建商家全链路服务</a>

                   </li>

                   <li>

                       <a href="#">个性化的消费时代来临</a>

                   </li>

                   <li>

                       <a href="#">跨境贸易是中小企业机</a>

                   </li>

                   <li>

                       <a href="#">美妆行业虚假信息管控</a>

                   </li>

               </ul>

           </div>

           <div class="dom">

               <ul>

                   <li>

                       <a href="#">接次文件，毁了一家店</a>

                   </li>

                   <li>

                       <a href="#">账号安全神器阿里钱盾</a>

                   </li>

                   <li>

                       <a href="#">新版阿里110上线了</a>

                   </li>

                   <li>

                       <a href="#">卖家学违禁避免被处罚</a>

                   </li>

               </ul>

           </div>

           <div class="dom">

               <ul>

                   <li>

                       <a href="#">为了公益high起来</a>

                   </li>

                   <li>

                       <a href="#">魔豆妈妈在线申请</a>

                   </li>

               </ul>

           </div>

       </div>

   </div>

</body>

</html>
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{

    margin: 0px;

    padding: 0px;

}

ul{

    list-style: none;

}

a{

    list-style:none ;

    color: black;

}

#tab{

    /*background-color: red;*/

    width: 498px ;

    height: 130px;

    border:1px solid #ddd;

    overflow: hidden;

    margin: 20px 0px 0px 20px;

}

#tab #tab-header{

    background-color: #F7F7F7;

    height:36px;

    position: relative;

}

#tab #tab-header ul{

    width: 501px;

    position: absolute;

    left: -1px;

}

#tab #tab-header ul li{

    float: left;

    /*background-color: green;*/

    width: 98px;

    height: 36px;

    line-height: 36px;

    text-align: center;

    padding: 0px 1px;

    border-bottom: 1px solid #ddd;

}

#tab #tab-header ul li.select{

   background-color: white;

    border-bottom: 0px;

    border-left: 1px solid #ddd;

    border-right: 1px solid #ddd;

    padding: 0px;

}

#tab #tab-header ul li:hover{

    color: orange;

    cursor: pointer;

    font-weight: bolder;

}

/* 内容部分 */

#tab #tab-content .dom {

    display: none;

}

#tab #tab-content .dom ul li{

   float: left;

    /*background-color: greenyellow;*/

    width: 240px;

    margin-left: 4px;

    margin-top: 15px;

}
/**

 * Created by apple on 16/9/21.

 */

function $(id) {

    return typeof  id === 'string' ? document.getElementById(id):id;

}

window.onload = function () {

    // 拿到所有的li标签(标题) 和 li对应的内容div

    var titles = $('tab-header').getElementsByTagName('li');

    var divs = $('tab-content').getElementsByTagName('div');

    // 判断

    if(titles.length != divs.length) return;

    for(var i = 0; i < titles.length; i++){

        var li = titles[i];

        li.id = i;

        li.onmousemove = function () {

            for (var j=0;j<titles.length; j++){

                titles[j].className = '';

                divs[j].style.display = 'none';

            }

            // 让当前的被选中

            this.className = 'select';

            divs[this.id].style.display = 'block';

        }

    }

}

PHP Tab的Demo的更多相关文章

  1. vue tab切换demo

    定义tab页面切换的内容 var app=new Vue({ el:'#app', data:{ navTabs:[ { text:"tab1", isActive:true, t ...

  2. CSS——tab导航demo

    问题总结: 1.ul要比外套div宽度的值大一点 2.ul需要往左移动1px 3.外套的div设置overflow隐藏 解决抖动: 1.li宽度设置98px,padding左右值1px,hover之后 ...

  3. Hybrid框架UI重构之路：三、工欲善其事，必先利其器

    上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : ...

  4. 从WeUI学习到的知识点

    WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ActionSheet, Ic ...

  5. 【BUG】---ionic tab-demo项目在modal页跳转URL改变页面不刷新，手动刷新后显示空白

    问题描述: 项目是基于ionic tab的demo,在modal上访问其他页面,地址栏变化了,但是页面不动没刷新,自己手动刷新呢,还是空白,可是访问的页面时有内容的啊 错误: 我的路由配置 .stat ...

  6. WeUI

    从WeUI学习到的知识点   WeUI是微信Web服务开发的UI套件, 目前包含12个模块 (Button, Cell, Toast, Dialog, Progress, Msg, Article, ...

  7. Android学习笔记总结

    第一步: Android(1) - 在 Windows 下搭建 Android 开发环境,以及 Hello World 程序 搭建 Android 的开发环境,以及写一个简单的示例程序 · 在 Win ...

  8. JQuery 网页选项卡制作

    网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...

  9. Java快速开发平台，JEECG 3.7.6性能增强版本发布

    JEECG 3.7.6 性能增强版本发布 导读       ⊙Vue SPA单页面应用 ⊙Datagrid标签实现不同风格切换,支持BootstrapTable.EasyUI ⊙灵活通用代码生成器工厂 ...

随机推荐

  1. maven-surefire-plugin总结

    Maven通过Maven Surefire Plugin插件执行单元测试.(通过Maven Failsafe Plugin插件执行集成测试) 在pom.xml中配置JUnit,TestNG测试框架的依 ...

  2. eclipse 版本号

    Eclipse 3.1 版本代号 IO [木卫1,伊奥]  Eclipse 3.2 版本代号 Callisto [木卫四,卡里斯托 ]Eclipse 3.3 版本代号 Eruopa [木卫二,欧罗巴  ...

  3. QT学习之-HelloWorld

    实现HelloWorld有2种方法. 第一种在mainwindow.ui直接添加Label且写上“HelloWorld”. 第二种是代码直接实现 #include "mainwindow.h ...

  4. forms6 builder安装之后设置注册表开发环境

  5. Ajax 填充 前端页面

  6. iframe框架里镶嵌页面；<marquee>：滚动效果；<mark>做标记；内联、内嵌、外联；选择器

    标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...

  7. css层叠选择

    首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...

  8. 局部变量、结构体和main函数

    在函数中定义的变量称为自动局部变量.因为每次调用该函数时,它们都自动“创建”,并且它们的只对于函数来说是局部的,局部对象的变量都会默认为空.局部变量的值只能在定义该变量的函数中访问,不能从函数之外访问 ...

  9. Windows下Memcache的安装与在php中使用

    memcache dll插件和测试例子下载地址: http://pecl.php.net/package/memcache Windows下Memcache的安装方法 Memcached官方:http ...

  10. IOS测试程序运行耗时

    iOS设备相对于电脑,内存和处理能力有限,所以一段代码或者程序运行的时间需要时刻注意,这里提供两种获取精确时间的方法. 方法一:使用系统时间 NSDate* tmpStartData = [[NSDa ...