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中写一个 ...

随机推荐

edittext把软键盘上的回车键改为搜索、发送或者下一步，窗口随软键盘弹出而改变。
http://m.blog.csdn.net/article/details?id=51350501 以上博文讲解很详细. 如图所示,有时候为了布局美观,在搜索时没有搜索按钮,而是调用软件盘上的按钮. ...
size_t 和 size_type的区别
为了使自己的程序有很好的移植性,c++程序员应该尽量使用size_t和size_type而不是int, unsigned 1. size_t是全局定义的类型:size_type是STL类中定义的类型属 ...
webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
mysql查看修改字符集
1.列出MYSQL支持的所有字符集: SHOW CHARACTER SET; 2.当前MYSQL服务器字符集设置 SHOW VARIABLES LIKE 'character_set_%'; 3.当前 ...
python之路2（基础详解）
python一切都是对象: 列子:
换个新的思路代替解压jar包例证：wechat4j 框架中的templateMsg类
很多朋友在写java的程序的时候都喜欢用第三方的jar包和框架,有可能遇到jar包中的内容已经跟不上官方开发者文档的更新,导致部分内容出错了,这个时候可能就要放弃这个jar的使用,但是这个jar中的其 ...
validate插件深入学习-03validate()方法配置项
validate()方法配置项 rules 定义校验规则 messages 定义提示信息上面这两个已经介绍过了 rules里隐藏的属性depends,只有符合条件(返回true)的时候才会执行 su ...
FtpClient.storeFile返回false解决方法
在确定路径和文件名没有中文的情况下添加以下代码 ftp.setFileTransferMode(ftp.BINARY_FILE_TYPE); ftp.enterLocalPassiveMode();/ ...
Execl 使用技巧
1. =COUNTIF(C:C;"*OS7*") 某一列中包含OS7的数量总数138
javascript事件之：谈谈自定义事件(转)
http://www.cnblogs.com/pfzeng/p/4162951.html 对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一 ...

tab切换-淘宝案例

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

随机推荐

热门专题