jquery实现未经美化的简洁TAB菜单效果

本文实例讲述了jquery实现未经美化的简洁TAB菜单效果。分享给大家供大家参考。具体如下:

这是一个看上去未经美化的简洁TAB选项卡,触发类的动作都是完整的,有兴趣的自己进行美化,美化漂亮了还是相当不错的,代码简洁,对学习参考比较不错,使用了jQuery插件。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-show-tab-plug-style-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 {font:normal 12px/20px simsun; margin:0 auto; padding:0;}
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
#tab{width:240px; margin:0 auto; text-align:center;}
.menu{height:35px; line-height:32px; padding-top:1px;}
.menu a{display:inline-block; height:35px; line-height:35px; width:116px; text-align:center; font-size:20px; color:#999999; font-weight:bold;}
.menu a:hover, .menu a.on{color:#d33b55; text-decoration:none;}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".menu a").each(function(i){
  $(this).click(function(){
   $(".menu a").removeClass("on").eq(i).addClass("on");
   $(".cnt").hide().eq(i).show();
   return false; //防止a跳转;
  })
 })
 });
</script>
</head>
<body>
<div id="tab">
 <div class="menu">
 <a href="#" class="on">ASP源码</a>
 <a href="#">Java源码</a>
 </div>
 <div class="cnt">
 <ul>
 <li>ASP源码1</li>
 <li>ASP源码2</li>
 <li>ASP源码3</li>
 </ul>
 </div>
 <div class="cnt" style="display:none;">
 <ul>
 <li>Java源码1</li>
 <li>Java源码2</li>
 <li>Java源码3</li>
 </ul>
 </div>
 </div>
</body>
</html>

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

时间: 2015-08-26

jQuery实现带幻灯的tab滑动切换风格菜单代码

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g

jQuery实现tab选项卡效果的方法

本文实例讲述了jQuery实现tab选项卡效果的方法.分享给大家供大家参考.具体如下: var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on(

jQuery实现滚动切换的tab选项卡效果代码

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-

jQuery实现TAB风格的全国省份城市滑动切换效果代码

本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码.分享给大家供大家参考.具体如下: 这里演示jQuery实现的全国省市菜单,加入了选项卡风格,把全国城市按字母范围归类,鼠标移到某一分类的时候,滑动门展开显示所属的全国省分和城市.特别适合于分类信息网站使用.当然,在需要选择省市的时候,也是可以用的.仔细看了下,菜单里面的城市还比较全,你不用再手动添加城市了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tab

jquery实现左右滑动菜单效果代码

本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

jQuery实现响应鼠标背景变化的动态菜单效果代码

本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery响应鼠标背景变化的动态菜单,菜单的背景在鼠标放上后有所变化,这款菜单的实现主要是使用了图片,修改菜单的时候要修改图片,有些麻烦,不过效果不错,引入的jquery插件是1.7版本,高版本jQuery未测试,应该也可以啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-co

原生js与jQuery实现简单的tab切换特效对比

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

jQuery网页选项卡插件rTabs用法实例分析

本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.

jquery实现TAB选项卡鼠标经过带延迟效果的方法

本文实例讲述了jquery实现TAB选项卡鼠标经过带延迟效果的方法.分享给大家供大家参考.具体如下: 如果你想实现鼠标停留在DIV上面N秒后才执行某些函数,或者类似下面的TAB切换时不经过之间的显示,用下面的方法可以实现. <!doctype html> <html> <head> <meta charset="utf-8"> <title>hoverTAB有延迟显示的效果</title> <style ty

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.

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

jQuery+CSS实现滑动的标签分栏切换效果

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back