首页
所有分类
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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 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) 逻辑架构(1) 锁(1) Mysql报错(1) 缓存(3) offset(1) limit(1) mysql.user(1) 性能优化(3) 策略(1)
You might like
PHP的历史和优缺点
2006/10/09 PHP
用PHP实现WEB动态网页静态
2006/10/09 PHP
一个用php3编写的简单计数器
2006/10/09 PHP
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
php 使用ActiveMQ发送消息，与处理消息操作示例
2020/02/23 PHP
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
nodejs提示：cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
JavaScript实现滑动门效果
2020/01/18 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Myprotein加拿大官网：欧洲第一的运动营养品牌
2018/01/06 全球购物
英国探险旅游专家：Explore
2018/12/20 全球购物
玩具公司的创业计划书
2013/12/31 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
Vue项目中如何封装axios（统一管理http请求）
2021/05/02 Vue.js
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
vscode内网访问服务器的方法
2022/06/28 Servers