tab切换-淘宝案例

案例：

html：

<body>
<div class="wrap" id="wrap">
　　<div class="notic" id="notic">
　　　　<ul>
　　　　　　<li class="select"><a href="#">公告</a></li>
　　　　　　<li><a href="#">规则</a></li>
　　　　　　<li><a href="#">论坛</a></li>
　　　　　　<li><a href="#">安全</a></li>
　　　　　　<li><a href="#">公益</a></li>
　　　　</ul>
　　</div>
　　<div class="conter" id="conter">
　　　　<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">
　　　　　　<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">
　　　　　　<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">
　　　　　　<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">
　　　　　　<ul>
　　　　　　　　<li><a href="#">公益宝贝卖家发票索取</a></li>
　　　　　　　　<li><a href="#">公益宝贝卖家发票索取</a></li>
　　　　　　　　<li><a href="#">公益宝贝卖家发票索取</a></li>
　　　　　　　　<li><a href="#">公益宝贝卖家发票索取</a></li>
　　　　　　</ul>
　　　　</div>
</div>
</div>

window.onload = function(){
var titles = $('notic').getElementsByTagName('li');
var divs = $('conter').getElementsByTagName('div');
if (titles.length != divs.length) {
return;
}
//遍历titles下的所有li
for (var i = 0; i<titles.length; i++) {
titles[i].index= i; //添加索引
titles[i].onmouseover = function(){

for (var j =0; j<titles.length;j++) {
this.className = 'select'; //滑过样式

titles[j].className='';
divs[j].style.display='none';
}

divs[this.index].style.display = 'block';

}
};
}
</script>

</body>
</html>

CSS：

*{
margin:0;
padding: 0;
text-decoration: none;
list-style: none;
font-size: 12px;
}
#wrap{
width: 300px;
height: 100px;
border:1px solid #eee;
overflow: hidden;
}
#notic{
height: 30px;
background: #f7f7f7;
position: relative;
}
.notic ul{
position: absolute;
left: -1px;
width: 301px;
}
.notic li{
float: left;
width: 58px;
height: 29px;
line-height: 29px;
padding: 0 1px;
text-align: center;
border-bottom: 1px solid #eee;
overflow: hidden;
background: #fff;
}
li a:link,
li a:visited{
color: #000;
}
li a:hover{
color: #f22d00;
font-weight: bold;
}
.notic li.select{
background: #fff;
padding: 0px;
font-weight: bold;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom-color:#fff;
}

.conter .mod{
margin:10px 10px 19px 16px;
}
.conter .mod ul li{
float: left;
overflow: hidden;
width: 134px;
height: 25px;
}

效果：

第二种：改变js

HTML:

window.onload = function(){
var titles = $('notic').getElementsByTagName('li');
var divs = $('conter').getElementsByTagName('div');
if (titles.length != divs.length) {
return;
}
for (var i = 0; i<titles.length; i++) {
titles[i].index= i;
titles[i].onmouseover = function(){
this.className = 'select';

for (var j =0; j<titles.length;j++) {

titles[j].className='';
divs[j].style.display='none';
}

divs[this.index].style.display = 'block';

}
};
}
</script>

</body>

CSS:

.conter .mod{
margin:10px 10px 19px 16px;
}
.conter .mod ul li{
float: left;
overflow: hidden;
width: 134px;
height: 25px;
}

.notic li:hover{
background: #fff;
padding: 0px;
font-weight: bold;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-bottom-color:#fff;
}

最终效果显示：

鼠标滑过导航部分显示正常，但是选择里面内容时发现小缺点；

鼠标选择内容：

tab切换-淘宝案例的更多相关文章

【前端开发】nrm切换淘宝镜像&nvm管理node版本及切换
说明:nrm是切换淘宝镜像用的,nvm是node的版本切换用的(可在自己电脑安装多个版本node,便于不同项目的支持) 一.nrm的安装及常见命令: 安装nrmnpm install -g nrm 查 ...
npm切换淘宝镜像源
npm 切换到淘宝源地址默认的npm下载地址:http://www.npmjs.org/淘宝npm镜像的地址:https://npm.taobao.org/ 临时使用淘宝源npm --registry ...
关于ruby -gem无法切换淘宝源
ruby官网提供的淘宝的gem源不起作用 https://ruby.taobao.org/ taobao Gems 源已停止维护,现由 ruby-china 提供镜像服务 http://gems. ...
npm 切换淘宝镜像几种方式
淘宝 npm 地址: http://npm.taobao.org/ 如何使用有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...
cas sso ajax的jsonp实现方案总结（新浪微薄、淘宝案例分析）
Cas自定义登录页面Ajax实现:http://cydiay.iteye.com/blog/1738713 CAS 之跨域 Ajax 登录实践:http://denger.iteye.com/blo ...
npm 切换淘宝源
由于Node官方模块仓库太慢,建议将模块仓库切换到阿里源 C:\workspace\angular>npm config set registry https://registry.npm.ta ...
『奇葩问题集锦』Ruby 切换淘宝源报错WARNING: Error fetching data: SSL_connect returned=1 errno=0 state=SSLv3 read s erver certificate B: certificate verify failed
===>首先需要使用https<===https://ruby.taobao.org/ 第一步下载http://pan.baidu.com/s/1kU0rxtH 复制到ruby安装的根目 ...
微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.co ...
vue仿淘宝订单状态的tab切换效果
<div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个 ...

随机推荐

山东省第七届ACM省赛------Fibonacci
Fibonacci Time Limit: 2000MS Memory limit: 131072K 题目描述 Fibonacci numbers are well-known as follow: ...
最常用的ES6特性
遇到了要写出es6新特性的题目,所以查阅了资料来总结一下,点击查看原文. 进入正题,最常用的ES6特性有:let, const, class, extends, super, arrow functi ...
[原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了其 ...
selenium截图对比校验方法
/**对比图片进行校验是否成功**/package com.allin.pc;import java.awt.image.BufferedImage;import java.awt.image.Dat ...
MVC JS中非表单元素路由传值
<span id="a" onclick="aaa(111)" style="cursor:pointer;">跳</sp ...
Learning by doing
Learning by doing 绪论:读了娄老师的公众号中--<做中学(Learning By Doing)>这篇文章后,深有感触,我想到很多自己之前的事情,很多都是每每想的很好,总是 ...
this的用法
因为循环是非常快的,我们手动点击的时候,for循环已经循环完了.如果在循环里面添加点击事件,点击事件的i的值就是循环结果的那个值,而不是对应的循环的值,此时,我们就需要用到this 来实现点击 ...
Creating Dialogs
#ifndef DIALOG_H #define DIALOG_H #include <QtWidgets> //#include <QDialog> //#include & ...
python datetime模块
该模块的时间有限时限:1 - 9999 dir(datetime) from datetime import datetime, timedelta, timezone dt = datetime. ...
TFS二次开发系列：七、TFS二次开发的数据统计以PBI、Bug、Sprint等为例（一）
在TFS二次开发中,我们可能会根据某一些情况对各个项目的PBI.BUG等工作项进行统计.在本文中将大略讲解如果进行这些数据统计. 一:连接TFS服务器,并且得到之后需要使用到的类方法. /// < ...

tab切换-淘宝案例

tab切换-淘宝案例的更多相关文章

随机推荐

热门专题