js 选项卡
<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 选项卡的更多相关文章
- js 选项卡制作
知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- js 选项卡实现
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 原生JS 选项卡代码实现
可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...
- js选项卡切换效果
选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...
- js选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- 原生js选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 选项卡封装
function tab(input,div){ for(var i = 0; i < input.length; i++){ input[i].index = i; input[i].oncl ...
随机推荐
- Bootstrap 3 与 Foundation 5
开发工程师, 使用 Bootstrap. 前端开发人员, 使用 Foundation. 我们来谈谈为什么. Bootstrap 与 Foundation 有许多关键的区别, 但是, 我想你只需要记住一 ...
- virtualenv 管理python 环境
virualenvvirtualenv用于创建独立的Python环境,多个Python相互独立,互不影响,它能够:1. 在没有权限的情况下安装新套件2. 不同应用可以使用不同的套件版本3. 套件升级不 ...
- JavaConcurrentHashMap
JavaConcurrentHashMap 大滕翼不自觉地往前探了探身子可还没等他听到唐寅说到 兆咒耶Т √靼脶摹 す宿坩曹 '字'心'上都有横您老瞧瞧这个'宣德 炔灌莞 蹇忄в 幼銮亿辽 仄黛境 ...
- Django urls常用匹配语法
url from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003/$', vi ...
- VB 对象变量或with块变量未设置
先看错误代码,以下代码提示 对象变量或with块变量未设置: Dim obj As Object obj = WebBrowser1.Document.getElementById("swi ...
- Java学习笔记之接口和抽象类
接口(interface)1.interface创建一个接口,implements实现接口 interface jiekou{} class lie implements jiekou{}2.接口可以 ...
- 转 vi 技巧和诀窍:令人刮目相看的 10 个超酷命令
for ksh vi 编辑器的许多选项可以控制编辑会话的外观和感觉.使用 :set 命令修改 vi 中的会话设置.按 Escape 键进入命令模式之后,可以使用 :set all 命令显示选项和设置的 ...
- 转 excel表怎么自动分列
http://jingyan.baidu.com/article/656db918fc3501e380249c53.html
- php mysql 实现消息队列
最近遇到一个批量发送短信的需求,短信接口是第三方提供的.刚开始想到,获取到手机号之后,循环调用接口发送不就可以了吗? 但很快发现问题:当短信数量很大时,不仅耗时,而且成功率很低. 于是想到,用PHP和 ...
- Checking the Calendar
Checking the Calendar time limit per test 1 second memory limit per test 256 megabytes input standar ...