首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现的仿天猫侧导航tab切换效果

Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下：

这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的产品分类，大网站风格，大气实用的多分类网页菜单。

运行效果截图如下：

jquery实现的仿天猫侧导航tab切换效果

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天猫侧导航-tab切换</title>
<style>
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td,select {margin: 0;padding: 0;}
fieldset, img {border: 0 none;}
img {vertical-align: top;}
:focus {outline: 0;}
address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: normal; font-weight: normal;}
/*重置标题为body正常字体大小，需要时可另行设置*/
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
abbr, acronym {border: 0;font-variant: normal;}
/*表单元素样式不会自动继承body样式，所以要设置其继承body的样式，或者像最后一行设置也可以*/
input, button, textarea,select, optgroup, option {font-family: arial;font-size: inherit;font-style: inherit; font-weight: inherit;}
code, kbd, samp, tt {font-size: 100%;}
input, button, textarea, select {*font-size: 100%; font-style: normal; font-variant: normal;}
ol, ul {list-style: none;}
input,select,label{vertical-align:middle}
table {border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
body{font:12px/1.5 Arial,Helvetica,sans-serif; _font-family:"SimSun";}
/*IE处于混杂模式时，body以窗口为高度参照，body设置为100%就可以使得页面和窗口一样高；
处于标准模式时，body以html标签为高度参照，html以窗口为高度参照，所以html要设置100%，body高度才会100%占满整个浏览器窗口*/
html, body {
 height: 100%;
 background: #FFF;
}
body {font: 12px/1.5 tahoma,arial,"宋体";}
h2 {font-size: 14px;}
h3 {font-size: 12px;}
a {
 color: #fff;
 text-decoration: none;
}
.sidebar {
 margin: 40px auto 0;
 width: 400px;
}
/* 切换导航样式 */
.sidebar_tab {
 float: left;
 width: 30px;
}
.sidebar_tab li {
 padding: 5px;
 border: 1px solid #ccc;
 background: #fff;
}
.sidebar_tab a {
 font-size: 14px;
 font-weight: bold;
 color: #ddd;
}
.sidebar_tab li:hover a {
 color: #fff;
}
.sidebar_tab_all a {
 color: #5a4e4d;
}
li.sidebar_tab_cur {
 margin-left: -7px;
 padding-left: 12px;
 -moz-border-radius: 8px 0 0 8px;/* FF浏览器低版本 圆角 */
 -webkit-border-radius: 8px 0 0 8px;/* Chrome和Safari浏览器 圆角 */
 border-radius: 8px 0 0 8px;
 behavior: url(../js/tool_iecss3.htc);/* IE浏览器 圆角 */
 }
li.sidebar_tab_cur a {color:#fff;}
.sidebar_tab_all:hover,.sidebar_tab_all.sidebar_tab_cur {background:#5a4e4d;}
.sidebar_tab_appliance a {color:#3a4e8a;}
.sidebar_tab_appliance:hover,.sidebar_tab_appliance.sidebar_tab_cur {background:#3a4e8a;}
.sidebar_tab_shop a {color:#c17987;}
.sidebar_tab_shop:hover,.sidebar_tab_shop.sidebar_tab_cur {background:#c17987;}
/* 主要内容区样式 */
.sidebar_main {
 float: left;
 margin-top: -30px;
 width: 300px;
}
.sidebar_main h2 {
 padding-left: 10px;
 line-height: 30px;
 color: #ccc;
}
.sidebar_main ul li {
 position: relative;
 padding: 5px 0 5px 10px;
 border-bottom: 1px solid #666;
}
.sidebar_main_all li {background:#877e7d;}
.sidebar_main_all h2,.sidebar_main_all li:hover {background:#736867;}
.sidebar_main_appliance li {background:#688ac8;}
.sidebar_main_appliance h2,.sidebar_main_appliance li:hover {background:#5568a3;}
.sidebar_main_shop li{background:#e68786;}
.sidebar_main_shop h2,.sidebar_main_shop li:hover {background:#bd7382;}
.sidebar_main li:hover em {display:none;}
.sidebar_main ul li a {padding-right:10px;}
.sidebar_main a {font-size:12px;}
.sidebar_main a:hover {text-decoration:underline;}
.sidebar_main h3 em {
 float:right;
 margin-right:20px;
 font-style:normal;
 color:#666;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(function() {
 /*切换导航，添加当前效果*/
 $(".sidebar_tab li a").mouseover(function() {
  $(this).parent("li").addClass("sidebar_tab_cur");
  $(this).parent("li").siblings().removeClass("sidebar_tab_cur");
 });
 /*鼠标移入导航，切换对应内容*/
 $(".sidebar_tab_all").mouseover(function() {
  $(".sidebar_main_all").show().siblings().hide();
 });
 $(".sidebar_tab_appliance").mouseover(function() {
  $(".sidebar_main_appliance").show().siblings().hide();
 });
 $(".sidebar_tab_shop").mouseover(function() {
  $(".sidebar_main_shop").show().siblings().hide();
 });
 });
 </script> 
</head>
<body>
<div class="sidebar">
 <!--导航切换-->
 <ul class="sidebar_tab">
  <li class="sidebar_tab_all sidebar_tab_cur"><a href="#">所有商品</a></li>
 <li class="sidebar_tab_appliance"><a href="#">电器城</a></li>
 <li class="sidebar_tab_shop"><a href="#">美容院</a></li>
 </ul>
 <!--内容切换-->
 <div class="sidebar_main">
 <!--所有商品分类-->
 <div class="sidebar_main_all">
   <h2>所有商品分类</h2>
   <ul>
    <li>
    <h3><a href="#">女装</a><a href="#">男装</a><a href="#">内衣</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">家居服</a></p>
   </li> 
  <li>
   <h3><a href="#">女装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
  <li><h3><a href="#">女装</a><a href="#">男装</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
  <li>
   <h3><a href="#">女装</a><a href="#">内衣</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li> 
  <li>
   <h3><a href="#">女装</a><a href="#">男装</a><a href="#">配件</a><em>></em></h3>
    <p><a href="#">连衣裙</a><a href="#">女T恤</a><a href="#">女裤</a><a href="#">男T恤</a></p>
    <p><a href="#">短裤</a><a href="#">衬衫</a><a href="#">文胸</a><a href="#">家居服</a></p>
   </li>
   </ul>
 </div>
 <!--电器城商品分类-->
  <div class="sidebar_main_appliance" style="display:none;">
   <h2>电器城商品分类</h2>
   <ul>
   <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">LED</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">生活电器</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">厨房电器</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">洗衣机</a><a href="#">油烟机</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  <li>
    <h3><a href="#">大家电</a><em>></em></h3>
  <p><a href="#">油烟机</a><a href="#">冰箱</a><a href="#">空调</a></p>
   <p><a href="#">液晶电视</a><a href="#">LED</a><a href="#">电视</a><a href="#">燃气灶</a></p>
  </li>
  </ul>
 </div>
 <!--美容院商品分类-->
 <div class="sidebar_main_shop" style="display:none;">
   <h2>美容院商品分类</h2>
   <ul>
   <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">装饰画</a><a href="#">花瓶</a></p>
  <p><a href="#">油画</a><a href="#">装饰器皿</a><a href="#">鲜花</a></p>
  </li>
  <li>
    <h3><a href="#">家饰鲜花</a><em>></em></h3>
   <p><a href="#">摆件</a><a href="#">照片墙</a><a href="#">装饰画</a></p>
  <p><a href="#">油画</a><a href="#">雕艺</a><a href="#">装饰器皿</a></p>
  </li>
  </ul>
 </div>
 </div><!--内容切换end-->
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

jquery实现的仿天猫侧导航tab切换效果

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
用javascript实现自定义标签
May 08 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
微信小程序实现单选功能
Oct 30 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
js实现类似MSN提示的页面效果代码分享
Aug 24 #Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 #Javascript
jquery性能优化高级技巧
Aug 24 #Javascript
javascript实现支持移动设备画廊
Aug 24 #Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
澳大利亚购物网站(309) 俄罗斯购物网站(137) 肯尼亚购物网站(2) 印尼购物网站(37) 埃及购物网站(2) 阿根廷购物网站(9) 台湾购物网站(77) 法国购物网站(144) 意大利购物网站(128) 丹麦购物网站(22)
You might like
超神学院：鹤熙已踏入神圣领域，实力不比凯莎弱
2020/03/02 国漫
理解PHP中的stdClass类
2014/04/18 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
javascript 播放器 控制
2007/01/22 Javascript
JS event使用方法详解
2008/04/28 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
javascript操作css属性
2013/12/30 Javascript
js电话号码验证方法
2015/09/28 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue实现输入框的模糊查询的示例代码（节流函数的应用场景）
2019/09/01 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
跟老齐学Python之画圈还不简单吗？
2014/09/20 Python
获取Django项目的全部url方法详解
2017/10/26 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
本科生求职简历的自我评价
2013/10/21 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
电话客服工作职责
2014/07/27 职场文书
同志主要表现材料
2014/08/21 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
组织生活会发言材料
2014/12/15 职场文书
会计求职自荐信范文
2015/03/04 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python