首页
所有分类
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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
JavaScript File分段上传
Mar 10 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
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
幻读(5) innoDB(3) GZIP(2) 间隙锁(2) 复读(1) DBLink(1) 事务并发(1) .NET Framework(2) IIS7(1) MVCC(4)
You might like
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
JS模拟多线程
2007/02/07 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
Python中turtle作图示例
2017/11/15 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
详解程序意外中断自动重启shell脚本（以Python为例）
2019/07/26 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python求凸包及多边形面积教程
2020/04/12 Python
The Hut德国站点：时装、家居用品、美容等
2016/09/23 全球购物
培训讲师岗位职责
2014/04/13 职场文书
幼儿发展评估方案
2014/06/11 职场文书
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript