仿淘宝右侧tab栏切换

<pre name="code" class="html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>tab切换</title><style type="text/css">body,ul {margin: 0;padding: 0;font-family: "microsoft yahei";}ul,li {list-style: none;}a {text-decoration: none;}.tabBox {position: absolute;width: 300px;height: 100px;border: 1px solid #ccc;border-right: none;left: 50%;margin-left: -150px;margin-top: 100px;}.boxTitle ul li {float: left;width: 60px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;box-sizing: border-box;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;}.boxTitle ul li.active {font-weight: bold;border-bottom: none;}.tabBox .boxTitle ul li a {color: #000;display: block;}.tabBox .box {width: 300px;height: 70px;border: 1px solid #ccc;box-sizing: border-box;border-top: none;border-left: none;border-bottom: none;overflow: hidden;}.hide {display: none;}.box ul li {font-size: 12px;float: left;width: 149px;height: 35px;line-height: 35px;text-align: left;padding-left: 10px;box-sizing: border-box;}.box ul li a {color: #8B8378;}.box ul li a:hover {text-decoration: underline;}.box ul .index-c {width: 300px;}.box ul .index-c a {color: #CC0000;}.cb {clear: both;}.outer {width: 100%;height: 100%;position: relative;margin-left: 50px;margin-top: 50px;box-sizing: border-box;}</style></head><body><div class="tabBox"><div class="boxTitle"><ul><li class="active"><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 class="cb"></div></div><div class="box"><div class="show"><ul><li class="index-c"><a href="#">[热门]2015天猫双11打破9项世界吉利斯记录</a></li><div class="cb"></div><li><a href="#">明年一月将举办"年货节"</a></li><!-- <li><a href="#">新一代好友互动"来往</a></li>--><li><a href="#">最受赞赏公司阿里折桂</a></li></ul><div class="cb"></div></div><div class="hide"><ul><li><a href="#">10月新规发布汇总</a></li><li><a href="#">广告法禁用语大全</a></li><li><a href="#">邮费争议问题汇总</a></li><li><a href="#">炒信规则调整意见反馈</a></li></ul><div class="cb"></div></div><div class="hide cb"><ul><li><a href="#">阿里建商家全链路服务</a></li><li><a href="#">个性化的消费时代来临</a></li><li><a href="#">跨境贸易是中小企业机</a></li><li><a href="#">美妆行业虚假消息管控</a></li></ul><div class="cb"></div></div><div class="hide cb"><ul><li><a href="#">防信息泄露，保钱包安全</a></li><li><a href="#">警企联手打击网络犯罪</a></li><li><a href="#">阿里安全四大技术创新</a></li><li><a href="#">二维码扫描有风险</a></li></ul><div class="cb"></div></div><div class="hide cb"><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" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript">$(function() {var div_ul_li = $("div.boxTitle ul li");div_ul_li.bind("mouseover", function() {$(this).addClass("active").siblings().removeClass("active");var index = div_ul_li.index(this);var hide = $("div.box>div");hide.eq(index).show(100).siblings().hide();hide.eq(index).find("a:eq(0)").css("color", "#CC0000");})})</script></body></html>

仿淘宝右侧tab栏切换相关推荐

js实现淘宝右侧导航栏功能
本章和大家分享的是模拟淘宝右侧导航栏的一个小功能. 左侧是商品内容,右侧是一个导航栏,当页面向下滚动的时候右侧导航栏也跟着移动. 当黄色内容区域到达顶部的时候,右侧导航栏变为固定的当黑色内容区到达顶 ...
纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制. 默认情况下,clipChild被设置为true. 也就是不允许进行 ...
js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
安卓项目实践——仿淘宝界面(二)——底部导航栏技术（Fragment实现）
安卓项目实践--仿淘宝界面(一)--底部导航栏技术(Fragment实现) 1.实现效果展示 2.技术简述该导航栏主要使用Fragment技术实现,关于Fragment的介绍大家可以自行百度,导航栏 ...
安卓仿淘宝导航栏实现
RadioButton+Fragment仿淘宝导航栏因为博主本人是初学者,所以本文参考了多位大佬的文章后才弄明白,以下代码由本人根据多位博主的文章整合修改完成效果图主布局xml文件 <?x ...
仿淘宝固定右侧侧边栏发现一个和教学视频不一样的地方
滚动案例scroll事件的综合应用自己添加了返回顶部的功能发现了一个和教学视频所讲不一样的地方 <!DOCTYPE html> <html lang="en" ...
Android仿淘宝tab返回
一.概述淘宝相信大家都在用过,不过不知道各位有没有仔细观察过淘宝的tab界面,尤其是返回的时候的逻辑.最近闲来无事,猛然发现淘宝的tab界面还真的挺好玩,废话不多说, ...

仿淘宝右侧tab栏切换

仿淘宝右侧tab栏切换相关推荐

最新文章

热门文章