<html><head lang="en">

    <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" class="tab">

       <div id="tab-head" class="tab-head">

           <ul>

               <li class="" id=""><a href="#">公告</a></li>

               <li id="" class=""><a href="#">规则</a></li>

               <li id="" class=""><a href="#">论坛</a></li>

               <li id="" class=""><a href="#">安全</a></li>

               <li id="" class="select"><a href="#">公益</a></li>

           </ul>

       </div>

       <div id="nav-con" class="nav-con">

           <div class="mod" style="display: none;">

               <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="mod" style="display: none;">

               <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="mod" style="display: none;">

               <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="mod" style="display: none;">

               <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="mod" style="display: block;">

               <ul>

                   <li>

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

                   </li>

                   <li>

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

                   </li>

               </ul>

           </div>

       </div>

   </div>

</body></html>
//function $(id){

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

//}

//

//window.onload = function(){

//   // 获取鼠标滑过的标签

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

//   var divs = $('nav-con').getElementsByTagName('div');

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

//   // 遍历titles下所有的li

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

//       titles[i].id = i;

//       titles[i].onclick = 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';

////           alert(this.id);

//       }

//    }

//

//}

function $(id){

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

}

window.onload = function(){

   // 获取所有的li(标题) 和 标题对应的内容(div)

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

    var divs = $('nav-con').getElementsByTagName('div');

   //    判断

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

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

       titles[i].id = i;

       titles[i].onmouseover = function(){

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

             titles[j].className = '';

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

         }

          this.className = 'select';

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

       }

    }

}

js 选项卡的更多相关文章

  1. js 选项卡制作

    知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. 慕课编程题JS选项卡切换

    Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...

  3. js 选项卡实现

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  4. 原生JS 选项卡代码实现

    可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...

  5. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  6. js选项卡

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  8. 原生js选项卡

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 选项卡封装

    function tab(input,div){ for(var i = 0; i < input.length; i++){ input[i].index = i; input[i].oncl ...

随机推荐

  1. Cowrie蜜罐部署教程【转载】

    0.蜜罐分类: 低交互:模拟服务和漏洞以便收集信息和恶意软件,但是攻击者无法和该系统进行交互: 中等交互:在一个特有的控制环境中模拟一个生产服务,允许攻击者的部分交互: 高交互:攻击者可以几乎自由的访 ...

  2. 暴力+树状数组维护 Codeforces Round #378 (Div. 2) C

    题目大意:给你一个长度为n的数组a,然后数值大的可以合并数值小的,且合并了以后该数组的长度-1.给你一个长度为k目标数组b,问,是否可以从a数组变到b数组,是就yes并且输出步骤.否就输出no 思路: ...

  3. apache启动报错：Cannot load php5apache2_2.dll into server

    错误信息: httpd.exe: Syntax error on line 178 of D:/Program Files/httpd-2.4.20-x64-vc14-r2 /Apache24/con ...

  4. 宏定义重写NSLog

    只需要 在ProjectName_Prefix.pch 中追加你对应的宏定义,不用import 就可以直接使用了. #define DEBUG //宏输出函数 #ifdef DEBUG #define ...

  5. 纯CSS做的一个Silder

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. ng-if 和 ng-show/ng-hide 之间的区别

    ng-if会移除dom,生成dom,而ng-show只是改变其display属性.所以你自己看着用吧.

  7. VC2010编译错误

    1. cannot convert parameter 1 from 'const char [43]' to 'LPCWSTR' 我是看了这个之后解决问题的~ http://blog.163.com ...

  8. 关于RuntimException

    对于实现接口的类如果要抛出异常的话,那么接口也要抛出异常 所以RuntimeException只要对于实现接口的类就可以了 对于继承的类也可以这样运用 毕竟在实际开发中接口不一定是自己写的,而且团队可 ...

  9. C# tostring()汇总

    原文:http://www.cnblogs.com/xiaopin/archive/2010/11/05/1870103.html C 货币 2.5.ToString("C") ￥ ...

  10. JPA 系列教程1-环境搭建

    JPA JPA全称Java Persistence API. JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. Hibernate3.2+.Top ...