<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. Bootstrap 3 与 Foundation 5

    开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一 ...

  2. virtualenv 管理python 环境

    virualenvvirtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够:1. 在没有权限的情况下安装新套件2. 不同应用可以使用不同的套件版本3. 套件升级不 ...

  3. JavaConcurrentHashMap

    JavaConcurrentHashMap 大滕翼不自觉地往前探了探身子可还没等他听到唐寅说到 兆咒耶Т √靼脶摹 す宿坩曹 '字'心'上都有横您老瞧瞧这个'宣德 炔灌莞 蹇忄в 幼銮亿辽 仄黛境 ...

  4. Django urls常用匹配语法

    url from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003/$', vi ...

  5. VB 对象变量或with块变量未设置

    先看错误代码,以下代码提示 对象变量或with块变量未设置: Dim obj As Object obj = WebBrowser1.Document.getElementById("swi ...

  6. Java学习笔记之接口和抽象类

    接口(interface)1.interface创建一个接口,implements实现接口 interface jiekou{} class lie implements jiekou{}2.接口可以 ...

  7. 转 vi 技巧和诀窍:令人刮目相看的 10 个超酷命令

    for ksh vi 编辑器的许多选项可以控制编辑会话的外观和感觉.使用 :set 命令修改 vi 中的会话设置.按 Escape 键进入命令模式之后,可以使用 :set all 命令显示选项和设置的 ...

  8. 转 excel表怎么自动分列

    http://jingyan.baidu.com/article/656db918fc3501e380249c53.html

  9. php mysql 实现消息队列

    最近遇到一个批量发送短信的需求,短信接口是第三方提供的.刚开始想到,获取到手机号之后,循环调用接口发送不就可以了吗? 但很快发现问题:当短信数量很大时,不仅耗时,而且成功率很低. 于是想到,用PHP和 ...

  10. Checking the Calendar

    Checking the Calendar time limit per test 1 second memory limit per test 256 megabytes input standar ...