<!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. CSS3：渐变大全

    渐变大全 声明 最后的老写法镜像渐变可能不太准确.其余都完全正确 <!DOCTYPE html> <html> <head> <meta http-equiv ...

  2. UVALive 7472

    题意 有n个循环 给出x a b c xi+1=(a*x+b)%c 要求是从这些循环中各取一个数 使加和最大并且给出一个m 满足sum%m!=0 n的范围是4次方 c的范围是3次方 训练赛的时候看了一 ...

  3. Apache Spark源码走读之21 -- WEB UI和Metrics初始化及数据更新过程分析

    欢迎转载,转载请注明出处,徽沪一郎. 概要 WEB UI和Metrics子系统为外部观察监测Spark内部运行情况提供了必要的窗口,本文将简略的过一下其内部代码实现. WEB UI 先上图感受一下sp ...

  4. Object-relational mapping

    https://en.wikipedia.org/wiki/Object-relational_mapping Object-relational mapping (ORM, O/RM, and O/ ...

  5. php thread

    1-include('w_fun.php');页面已经在执行,则修改include中的函数,倒置旧页面不受影响:新页面生效:2-time  轮流 echo ' <script> windo ...

  6. Java中的匿名对象

    匿名对象就是没有明确给出名字的对象.一般匿名对象只使用一次,而且匿名对象只在堆内存中开辟空间,而不存在栈内存的引用. 一个普通的常量字符串就可以表示一个匿名String对象. 比如可以 int len ...

  7. JS获取Cookie值

    function GetLoginCookie() { var userCookie = getCookie("mycookie"); var loginname = userCo ...

  8. TOMCAT源码分析(启动框架)

    建议: 毕竟TOMCAT的框架还是比较复杂的, 单是从文字上理解, 是不那么容易掌握TOMCAT的框架的. 所以得实践.实践.再实践. 建议下载一份TOMCAT的源码, 调试通过, 然后单步跟踪其启动 ...

  9. crossvcl.com - 用VCL开发MacOS软件

    还没正式发布.用力戳 http://crossvcl.com/ 消息来源:Delphi G+ Group.具体信息还没完全披露,但是可以肯定的是,不是通过FireMonkey,而是通过原生的MacOS ...

  10. [LeetCode] Subsets （bfs的vector实现）

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...