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>
<script type="text/javascript">
function $(index){
return typeof index === 'string' ? document.getElementById(index):index;
}
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:
<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>
<script type="text/javascript">
function $(index){
return typeof index === 'string' ? document.getElementById(index):index;
}
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:
*{
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;
}
.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中写一个 ...
随机推荐
- ECMA中的switch语句
switch借鉴自其他语言,但也有自己的特色. 1.可以在switch语句中使用任何数据类型(数值.字符串.对象等),很多其他语言中只能使用数值. 2.每个case的值不一定是常量,可以是变量或者表达 ...
- tomcat端口号被占用
Eclipse启动TomCat报错:Several ports (8080, 8009) required by Tomcat v8.0 are already in use. Eclipse启动To ...
- 课程设计 --- 黑白棋中的 AI
原文链接:https://www.dreamwings.cn/reversi/3013.html 到了考试周了佯,可是偏偏这个时候迎来了很多很多的课程设计,幸好教授把C语言的课程设计提前发出了,不然都 ...
- jQuery概述
JQUERY JS语法字典---网友总结 1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->ht ...
- [java报错]Could not instantiate listener XXXXXX
写在开头的话: 兜兜转转,辞去了深圳的工作,回到了武汉,从事的居然一度是我最不想学的语言-java,曾经以为自己并不会java,但是上手之后,发现语言都是相通的,自己一度排斥学习java真的是不能再傻 ...
- [TCPIP] 分层 Note
TCP/IP 分层 TCP/IP是一组不同层次上的多个协议的组合. 通常被分为:链路层.网络层.运输层.应用层 1. 链路层(数据链路层 或 网络接口层) 通常包括操作系统中的设备驱动程序和计算机中 ...
- linux和android博客链接
1.Tracy Mcgrady的专栏冰山一角:linux和Android底层开发,主要是mtk系列点击打开链接 2.郁闷Wednesday:嵌入式linux 单片机 android,点击打开链接 3. ...
- ASP.NET中cookie与Fiter实现简单登陆,AllowAnonymous匿名登陆
向服务器发送cookie 在登陆的时候,我们可以可以通过下列代码,向服务器发送cookie,其中包括自己的账号信息(不涉及加密),用以后面判断访问者. HttpCookie cookie = new ...
- CVE-2016-4758: UXSS in Safari's showModalDialog
I would like to share about details of Safari's UXSS bug(CVE-2016-4758). This bug was fixed in Safar ...
- java.lang.InstantiationException-反射机制
package com.test.classtest; public class test { public static void main(String[] args) throws Except ...