jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下：
这里演示jquery实现仿天猫侧导航tab切换效果，引入外部JS,若初次运行有错误请刷新一页面即可。本菜单是仿天猫商城的菜单，大块的div菜单，支持超多的产品分类，大网站风格，大气实用的多分类网页菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/
具体代码如下：
<!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实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
本文实例讲述了jQuery实现鼠标跟随提示层效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层.如以上购评分明细提示.(优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果) jquery.cluetip.css /* global */ #cluetip-close im
-
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&
-
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
---------tabs.js----------------- 复制代码 代码如下: $(function(){ //init seleted tab var on= $.cookie('current_tab'); if(on!="" && !isNaN(on)) { $(".nav li").eq(on).addClass("on").siblings().removeClass(); } //default tab el
-
jQuery插件datatables使用教程
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能. 如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jquery的datatables插件来实现了发现还是比较简单的,今天我们来看一个例子,来说明这个插件的使用,基本原理是view函数从数据库中读出数据,jquery通过ajax获取数据并在前端展示出来,我们先定义一个models.py,如下: from django.dbimport models
-
jquery编写Tab选项卡滚动导航切换特效
本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=
-
jquery实现的仿天猫侧导航tab切换效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h
-
微信小程序实现滴滴导航tab切换效果
本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下 效果图如下: (请自动忽视底部tab.....) 简单介绍一下:顶部导航使用 scroll-view 组件 中间的内容部分使用 swiper 组件 实现的逻辑就是: 先这样在这样,这样然后那样.(此处省略200个字). 代码如下,复制可用 wxml <view class="contain"> <!-- 导航栏 --> <scroll-view class="t
-
Android仿新闻顶部导航标签切换效果
最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor
-
vue router仿天猫底部导航栏功能
首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址 http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <
-
jQuery简单实现仿京东分类导航层效果
本文实例讲述了jQuery简单实现仿京东分类导航层效果.分享给大家供大家参考,具体如下: <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var alink01 = $(".item > ul"); al
-
jquery实现通用的内容渐显Tab选项卡效果
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
jQuery简单tab切换效果实现方法
本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)
-
jQuery简单实现仿京东商城的左侧菜单效果代码
本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码.分享给大家供大家参考.具体如下: 这是一款挺漂亮的左侧菜单效果,基于jQuery插件,但是还没有真正的完善,有些闪动,也希望高人指点修正.仿京东商城风格的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
vue3封装侧导航文字骨架效果组件
vue3 项目封装侧导航文字骨架效果组件-全局封装,供大家参考,具体内容如下 目的 当显示页面的时候,有些数据是需要从后台加载,网络不好的时候可能需要等待,那就可以做一个骨架层闪动动画,增加用户体验 大致步骤 - 需要一个组件,做占位使用.这个占位组件有个专业术语:骨架屏组件. ·暴露一些属性:高,宽,背景,是否有闪动画. - 这是一个公用组件,需要全局注册,将来这样的组件建议再vue插件中定义. - 使用组件完成左侧分类骨架效果. 落地代码 一.封装组件 <template> &
-
JS+CSS实现仿雅虎另类滑动门切换效果
本文实例讲述了JS+CSS实现仿雅虎另类滑动门切换效果.分享给大家供大家参考.具体如下: 这是仿照雅虎特色服务的一个Tab滑动切换效果,核心是一个CSS滑动门,经过了改进,有点特别,看下效果吧,估计很多朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi