<!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. [转]在VS2010 VC++项目中引用Lib静态库（以Openssl为例）

    本文转自:http://kb.cnblogs.com/page/94467/ Openssl是个为网络通信提供安全及数据完整性的一种安全协议,囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SS ...

  2. twitter storm源码走读之4 -- worker进程中线程的分类及用途

    欢迎转载,转载请注明出版,徽沪一郎. 本文重点分析storm的worker进程在正常启动之后有哪些类型的线程,针对每种类型的线程,剖析其用途及消息的接收与发送流程. 概述 worker进程启动过程中最 ...

  3. Javascript 笔记与总结（1-2）词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...

  4. html 实体转换为字符：转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

    在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;& ...

  5. [转]理解OAuth 2.0

    作者: 阮一峰 OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释, ...

  6. Irrlicht引擎I 配置

    游戏是一个比较大的系统,包含了图形引擎.网络.AI.声音.UI等模块,模块的开发可能会分别进行或者采用开源项目,Irrlicht引擎基本包含了这些模块,不过在使用中也会陆续加入其它的模块.以前开发的程 ...

  7. MVC validation

    <div class="editor-field"> @Html.TextBoxFor(m => m.DateField) @Html.ValidationMes ...

  8. web.xml总结整理

    web.xml 配置的详细解读 web.xml (部署描述符文件) 整理参考:      加载顺序 ServletContext-->listener->filter->srvlet ...

  9. jboss中文支持

    一.中文问题 如果操作系统不支持中文, 应首先使操作系统上的Server支持中文. 修改run.conf中 -Dfile.encoding=gbk -Ddefault.client.encoding= ...

  10. nrf51822裸机教程-PWM

    先简单介绍一下PWM的原理. 原理很简单. 假设COUNTER是个从0开始递增的计数器.  我们设置两个值 counter0 和counter1 在 COUNTER 计数到counter0的值时候翻转 ...