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 ...
随机推荐
- docker Swarm 集群发现
Node 发现 $swarm manage --discovery dockerhost01:,dockerhost02:,dockerhost03: -H= 文件发现 $swarm manage - ...
- zookeeper集群实例
zookeeper是什么 Zookeeper,一种分布式应用的协作服务,是Google的Chubby一个开源的实现,是Hadoop的分布式协调服务,它包含一个简单的原语集,应用于分布式应用的协作服务, ...
- make: *** No rule to make target `out
按照google的指引,一路很顺,最后make -j5的时候出现:make: *** No rule to make target `dalvik/vm/mterp/out/InterpAsm-x86 ...
- wpf中ListBox的选中项与ComboBox间的绑定
产品类: public class Product:NotificationObject { private int productID; public int ProductID { get { r ...
- HDU4815/计数DP
题目链接[http://acm.hdu.edu.cn/showproblem.php?pid=4815] 简单说一下题意: 有n道题,每到题答对得分为a[ i ],假如A不输给B的最小概率是P,那么A ...
- Android中获取网络数据时的分页加载
//此实在Fragment中实现的,黄色部分为自动加载,红色部分是需要注意的和手动加载, 蓝色部分是睡眠时间,自我感觉不用写 ,还有就是手动加载时,不知道为什么进去后显示的就是最后一行,求大神 ...
- PAT (Advanced Level) 1114. Family Property (25)
简单DFS. #include<cstdio> #include<cstring> #include<cmath> #include<vector> # ...
- [转]solr DataImportHandler 解决mysql 表导入内存溢出问题
最近一个项目要用到solr做全文检索,开始盲人摸象. 用tomcat 7 开始配置,开始正常,但是遇到cookie里有中文就报错. 无奈,换tomcat 6, 结果DataImportHandler ...
- android 没有main函数,怎么找到程序执行入口呢?以及activity主要生命周期的方法说明
android应用程序,由一到多个Activity组成.每个Activity没有很紧密的联系,因为我们可以在自己的程序中调用其它Activity,特别是调用自己的代码之外生成的Activity,比如a ...
- [转载] ASP.NET MVC4使用百度UEDITOR编辑器
前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/downloa ...