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 ...
随机推荐
- flash检测网络是否通畅
air: 要在 Adobe ® Flash ® Professional(CS4 或更高版本)中使用 air.net 包: 选择“文件”>“发布设置”命令. 在 Flash 面板中,单击 Act ...
- PHP文件相关函数试题
一.问答题 1.返回路径中的文件名部分的函数是什么? 2.改变文件模式的函数是什么? 3.拷贝文件的函数是什么? 4.返回路径中的目录部分的函数是什么? 5.将上传的文件移动到指定位置的函数是? 6. ...
- c语言的编译过程和GCC 编译参数
原文: http://www.cnblogs.com/zhangShanGui/p/4912135.html C语言的编译过程和GCC编译参数 C语言的编译一般有三个步骤: 预编译: gcc -E - ...
- Stammering Aliens
Stammering Aliens Time Limit: 2000MS Memory Limit: 65536K Description Dr. Ellie Arroway has ...
- struts2中的值栈对象ValueStack
ValueStack, 即值栈对象. 值栈对象: 是整个struts数据存储的核心,或者叫中转站. 用户每次访问struts的action,都会创建一个Action对象.值栈对象.ActionCont ...
- Java中的五种单例模式实现方法
[代码] Java中的五种单例模式实现方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ...
- POJ1182--食物链(经典并查集)并查集看不出来系列2
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 65906 Accepted: 19437 Description ...
- CodeForces 681C Heap Operations(模拟)
比较简单的模拟,建议使用STL优先队列. 代码如下: #include<iostream> #include<cstdio> #include<cstring> # ...
- 链接libtorrent库时出现的问题
在QtCreator中使用libtorrent库的时候, 项目配置中 libs项配置如下: LIBS += -liconv -ltorrent-rasterbar -lboost_system -lb ...
- The Accumulation of Capital
The Accumulation of Capital ---- by *Adam Smith Capitals are increased by parsimony, and diminished ...