<!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. 让apache不区分图片和文件后缀大小写

    加载mod_speling模块: LoadModule speling_module /usr/lib/apache2/modules/mod_speling.so 开启模块: CheckSpelli ...

  2. Bootstrap页面布局19 - BS提示信息

    提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...

  3. jquery()的三种$()

    jQuery中的$以及选择器总结 $号是jQuery”类”的一个别称,$()构造了一个jQuery对象.所以,”$()”可以看作jQuery的”构造函数”(个人观点). 一.$符号 1.$()可以是$ ...

  4. selenium By 元素定位详解

    转自:http://blog.sina.com.cn/s/blog_6966650401012a6u.html WebDriver拾级而上·之三 定位页面元素 selenium-webdriver提供 ...

  5. Java Phaser

    //Listing 6-5. Using a Phaser to Control a One-Shot Action Serving a Variable Number //of Parties im ...

  6. 使用微信JS-SDK 实现 自定义 分享 功能

    微信PC端点击页面,转发给朋友.

  7. Flume协作框架

    1.概述 ->flume的三大功能 collecting, aggregating, and moving 收集 聚合 移动 2.框图 3.架构特点 ->on streaming data ...

  8. express 查看版本号

    新安装了express,但是当查看版本号输入: express -v 时出现如下错误: 网上查找了相关资料才发现express查看版本 的命令是 express -V (即V大写) 再次尝试: 发现同 ...

  9. LINQ之select方法选择多个字段

    单个字段: var list1 = list.Select(field1 => field1.CouponID).ToList(); 多个字段: var list1 = list.Select( ...

  10. magento url rewrite using config.xml

    magento url rewrite using config.xml 2012-08-03 14:34:22|  分类: magento|举报|字号 订阅     郁闷了两天啊 http://12 ...