【jquery】tabs选项卡切换效果(jquery版)
来源:互联网 发布:淘宝 无忧退货 编辑:程序博客网 时间:2024/04/28 22:47
以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。
效果图如下:
html 代码如下:
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"/> <title>选项卡(jquery版)</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> .tabs{width:500px;margin:100px auto;} .tabs_menu{font-size:0;} .tabs_menu a{padding:5px;border:1px solid blue;font-size:12px;margin-left:10px;background:#ECECEC;float:left;} .tabs_menu .selected{background:white;border-bottom:1px solid white;position:relative;} .tabs_content{border:1px solid blue;padding:10px;margin-top:-1px;} </style></head><body> <div class="tabs"> <h2 class="tabs_menu clearfix"> <a href="javascript:;" class="selected">新闻</a> <a href="javascript:;">体育</a> <a href="javascript:;">娱乐</a> </h2> <div class="tabs_content_wrap"> <div class="tabs_content">新闻新闻新闻新闻新闻新闻</div> <div class="tabs_content hide">体育体育体育体育体育体育</div> <div class="tabs_content hide">娱乐娱乐娱乐娱乐娱乐娱乐</div> </div> </div></body></html><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">var $menu = $('.tabs > .tabs_menu a');$menu.click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var index = $menu.index(this); $('.tabs_content_wrap > .tabs_content').eq(index).show().siblings().hide();});</script>
小提示:如果使用 jquery,则需要引入 jquery 库。
PS:以上是本人通过所学的 jquery 知识,随意写的一些效果。
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 【jquery】tabs选项卡切换效果(jquery版)
- tabs选项卡切换效果(jquery版)
- jQuery实现选项卡(tabs)效果
- jQuery实现选项卡(tabs)效果
- jquery自动切换tabs选项卡
- jQuery EasyUI 教程-Tabs(选项卡)
- jQuery EasyUI 教程-Tabs(选项卡)
- jQuery EasyUI 教程-Tabs(选项卡)
- JQuery Tabs 选项卡插件
- Jquery实现选项卡tabs
- jquery超简易选项卡切换效果
- Jquery-UI—制作选项卡(tabs)
- jQuery Tabs插件 (选项卡插件) --推荐
- 【jQuery】选项卡插件——tabs
- Jquery 选项卡切换
- jquery选项卡切换
- jquery选项卡切换
- jquery 选项卡切换
- JQueryEasyUI学习笔记(一)
- 利用开发板上的RS485模块与PC机的串口通讯
- 字符串面试
- Web调试工具:火狐Firefox插件Firebug介绍
- remove and re-install mysql 5.6 on centOS 6.4
- 【jquery】tabs选项卡切换效果(jquery版)
- HDU3790--最短路径问题
- 关于STDIN_FILENO
- [cocos2d-x] HOWTO-integrate json in cocos2dx
- WSDL2Java 命令参数参考
- 雅安加油!!@!!!
- 安装Sql2008和vs2010的顺序!
- javafx visual effects
- 50个在网站中经常使用的酷感的slider滑块