1.html代码:

<div class="tbh-notice"><ul class="ul-1"><li class="list active"><a href="#">公告</a><ul class="list_cont show"><li><a href="#">9.9天猫全球酒水节启动</a></li><li><a href="#">10万款酒水等你来干杯</a></li><li><a href="#">天猫超市"订单价对折"</a></li><li><a href="#">女排朱婷上闲鱼学技能</a></li></ul></li><li class="list"><a href="#">规则</a><ul class="list_cont"><li><a href="#">手机号卡商品禁售变更</a></li><li><a href="#">医疗服务类商品禁售</a></li><li><a href="#">全球购买手市场管理规</a></li><li><a href="#">分期返还类商品禁售</a></li></ul></li><li class="list"><a href="#">论坛</a><ul class="list_cont"><li><a href="#">G20杭州快递影响</a></li><li><a href="#">杭州"低慢小"禁飞</a></li><li><a href="#">十八纸颠覆家具</a></li><li><a href="#">是赚钱还是骗子</a></li></ul></li><li class="list"><a href="#">安全</a><ul class="list_cont"><li><a href="#">小心被骗子买家盯上</a></li><li><a href="#">为什么搜不到你宝贝</a></li><li><a href="#">代理生态净化启动</a></li><li><a href="#">新手卖家自杀式玩法</a></li></ul></li><li class="list"><a href="#">公益</a><ul class="list_cont"><li><a href="#">阿里捐赠700万元救灾</a></li><li><a href="#">阿里与残联出助残政策</a></li><li><a href="#">公益宝贝卖家发票索取</a></li><li><a href="#">公益机构淘宝开店攻略</a></li></ul></li></ul></div>

2.js代码:

/*选项卡*/function tbh_notice(){var oAnnouncement = document.getElementsByClassName('tbh-notice')[0];var list = oAnnouncement.getElementsByClassName('list');var listCont = oAnnouncement.getElementsByClassName('list_cont');var timer = null;// 当鼠标悬停在第一级菜单,显示下面的二级菜单for(var i=0; i<list.length; i++){list[i].index = i;list[i].onmouseover = function(){clearInterval(timer);var This = this;var index = this.index;timer = setTimeout(function(){//一级菜单显示情况for(var i=0; i<list.length; i++){removeClass(list[i],'active');}addClass(This,'active');//二级菜单显示情况for(var i=0; i<listCont.length; i++){removeClass(listCont[i],'show')}addClass(listCont[index],'show');},300)    }}}//添加类名函数addClass();
function addClass(obj, newClass) {var oldClass = obj.className;if (oldClass == '') {obj.className = newClass;return false;}var arr = oldClass.split(" ");for (var i = 0; i < arr.length; i++) {if (arr[i] == newClass) {return false;}}arr.push(newClass);obj.className = arr.join(" ");
}
//删除类名函数removeClass();
function removeClass(obj, old) {var oldClass = obj.className;var arr = oldClass.split(" ");for (var i = 0; i < arr.length; i++) {if( arr[i] == old ) {arr.splice(i,1)break;}}obj.className = arr.join(" ");
}

3.预览图:

       

转载于:https://www.cnblogs.com/ICE-Dong/p/7485783.html

淘宝首页交互5--选项卡相关推荐

  1. 页面布局(1):淘宝首页

    大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...

  2. 淘宝首页的搜索规律 高级搜索页搜索规律 淘宝商家应对的优化策略

    探索淘宝掌柜们最关心的问题:淘宝搜索排名有规律可循吗?淘宝的关键词是自然而然的排名呢?还是有规律可循呢?我想这个答案是肯定的,正所谓无规不成方圆,任何事情都有他的规律可循,就看你是怎么去发现了,今天我 ...

  3. 仿京东、淘宝首页,通过两层嵌套的RecyclerView实现tab的吸顶效果

    为什么会有这篇文章 之前写过一篇文章使用CoordinatorLayout过程中遇到的两个问题以及浅析CoordinatorLayout工作机制,这篇文章上主要讲了通过CoordinatorLayou ...

  4. 一天造出10亿个淘宝首页,阿里工程师如何实现?

    双11手淘首页的几个重要推荐场景截图如下: 如上图所示,左一场景为AIO综合会场,包括AIO日常场景(淘抢购.有好货.清单等).双11人群会场及行业会场:中间为AIOplus场景卡片综合会场,包括5张 ...

  5. 《淘宝首页性能优化实践》文章阅读

    想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多 串行请求渲染一个模块 运营数据和个性化数据匹 ...

  6. 还原淘宝首页最顶部的导航栏(含下拉菜单,图标等)

    还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下 原始导 ...

  7. HTML+CSS零基础学习笔记(五)— 模拟淘宝首页(静态)

    内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...

  8. 淘宝首页链接跳转,非taobao.com域名下的链接处理

    淘宝首页需要实现这样一个功能,对于页面上非taobao.com域名下的链接,在用户点击时,需要在链接处弹出提示框,提示用户此链接非淘宝域名下的链接,并给与用户选择是否继续访问.如果用户确认继续访问,则 ...

  9. 2016淘宝首页改版 细说淘宝首页设计变化史

    近日,从微博上看到有网友说淘宝首页改版,现在淘宝正在一步步接入新版本,知情人士从3月22日就已经得到了淘宝官方人员的消息:新版资源位3月24日开始会接入部分流量,到时新旧版资源位会共存一段时间,直到旧 ...

最新文章

  1. JZOJ 100045. 【NOIP2017提高A组模拟7.13】好数
  2. SQL之rand,round,floor,ceiling,cast小数处理函数
  3. KAFKA介绍(分布式架构)
  4. python 写游戏好简单啊,我用键盘可以随意控制角色了【python 游戏实战 04】
  5. 七步从AngularJS菜鸟到专家(4和5):指令和表达式
  6. [WARNING]考前必读?!
  7. Linux 金字塔 的shell命令,shell脚本编程设计——根据输入的数输出菱形、三角形或者数字金字塔(带闪烁颜色)...
  8. linux内网安装git,Linux 安装git
  9. 向量叉乘意义amp;amp;NYOJ68三点顺序
  10. 三目表达式和if-else语句完全一样吗?
  11. 形容计算机技术发展的词,形容技术发展的成语是什么_四字词语 - 成梦词典
  12. python俄罗斯方块算法详解_python俄罗斯方块
  13. spring data jpa 出现Not a managed type
  14. npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock
  15. Programming Ruby读书笔记
  16. 华为什么出鸿蒙系统,华为已官宣鸿蒙,中兴和魅族的态度却截然不同, 到底啥原因?...
  17. css3 性能优化之 will-change 属性
  18. C++后端开发(校招实习生)学习路线
  19. Linux下如何拷贝隐藏文件
  20. Git Commit emoji Guide

热门文章

  1. 微信小程序开发手账从入门到部署【持续更新】
  2. 动态规划之0-1背包问题(思路详解+表格演示过程+最优解打印方法+详细代码)
  3. Tipask目录结构
  4. 【ybt高效进阶4-4-3】【luogu P4513】公园遛狗 / 小白逛公园
  5. 中泰证券钢铁行业数据库
  6. python面向对象基础-01
  7. matlab-simulink-simscape的直流电动机模型仿真
  8. 这就是你日日夜夜想要的docker!!!---------docker+consul+ nginx集成分布式的服务发现与注册架构
  9. untiy 监听屏幕点击 物体(实现)
  10. html中日期下拉选怎么设置,html中option标签(下拉列表选项)的详细介绍