<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. ASP.NET多文件批量打包下载

    在对多文件打包中用到了 DotNetZip 的方法来实现对多文件压缩打包.需要到http://dotnetzip.codeplex.com/处下载该文件,然后引用即可. Default.aspx: & ...

  2. shell命令一行代码搞定【转】

    查看文件内容-while: cat 1.txt|while read line;do echo $line;done while read line; do echo $line; done < ...

  3. 新手安装Oracle后的一些问题

      1.安装数据库服务端后,桌面上有个 打开之后点击一些按钮会叫你登录,用户名是SYSTEM,密码是安装的时候设置的密码(我设置的密码是root). . 2.在操作系统"运行"上输 ...

  4. DLT(Diagnostic Log and Trace)嵌入式系统程序运行记录

    http://blog.csdn.net/yanlinembed/article/details/49837975 DLT的使用有属于Application范畴与Context范畴.在使用DLT时,需 ...

  5. Linux下配置Nginx按天切割日志

    Nginx由于轻巧和高效的设计风格,去掉了一些额外的功能,所以它不像apache那样有自动切割日志. 建立一个脚本文件,并保证这个文件有可执行的权限:1.建立一个文件/root/log.nginx.s ...

  6. 深入理解javascript执行上下文(Execution Context)

    本文转自:http://blogread.cn/it/article/6178 在这篇文章中,将比较深入地阐述下执行上下文 - Javascript中最基础也是最重要的一个概念.相信读完这篇文章后,你 ...

  7. JSP error: Only a type can be imported

    错误: [14] in the generated java file: [E:\apache-tomcat-7.0.63-windows-x64\apache-tomcat-7.0.63\work\ ...

  8. 一篇非常适合git入门的文章

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579 ...

  9. 详细的SQL中datediff用法

    DATEDIFF 函数 [日期和时间] 功能返回两个日期之间的间隔. 语法DATEDIFF ( date-part, date-expression-1, date-expression-2 ) da ...

  10. bjective-C 中核心处理字符串的类是 NSString 与 NSMutableString

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...