<!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. DS实验题 Dijkstra算法

    参考:Dijkstra算法 数据结构来到了图论这一章节,网络中的路由算法基本都和图论相关.于是在拿到DS的实验题的时候,决定看下久负盛名的Dijkstra算法. Dijkstra的经典应用是开放最短路 ...

  2. Ubuntu 开启 Crontab 计划任务日志

    Ubuntu 下的 Crontab 日志功能不是自动开启的.开启日志功能的步骤是: ① 修改 rsyslog sudo vim /etc/rsyslog.d/-default.conf 找到: #cr ...

  3. iMx280A测试声纹

    1.首先要有声纹识别的动态库,且arm-linux-gcc的版本相同.可以在虚拟机用file 命令来看文件的基本信息,通过file指令,我们得以辨 识该文件的类型. 2.用tftp将库传到开发板的li ...

  4. 实用Javascript代码片段

    清除select下拉选项,添加并选择特点选项 $('#mySelect') .find('option') .remove() .end() .append('<option value=&qu ...

  5. nginx高并发优化

    一、一般来说nginx 配置文件中对优化比较有作用的为以下几项： 1.  worker_processes 8; nginx 进程数，建议按照cpu 数目来指定，一般为它的倍数 (如,2个四核的cpu ...

  6. Fingerprinting

    https://wiki.mozilla.org/Fingerprinting Fingerprinting   Contents 1 Overview 2 Data 2.1 Plugins 2.2 ...

  7. Flink DataSet API Programming Guide

     https://ci.apache.org/projects/flink/flink-docs-release-0.10/apis/programming_guide.html   Example ...

  8. ajax+jsp自动刷新

    通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...

  9. 【转】UML图中类之间的关系

    原文:http://blog.csdn.net/hguisu/article/details/7609483   类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相 ...

  10. MessageQueue 一 简单的创建和读取

    创建一个队列,并写入数据 在读取出来 using System; using System.Collections.Generic; using System.Linq; using System.M ...