jquery中实现简单的tabs插件功能的代码


Posted in Javascript onMarch 02, 2011

言归正传,以下是全文。

先附上两张最简单的效果图。

jquery中实现简单的tabs插件功能的代码

jquery中实现简单的tabs插件功能的代码

首先编写简单的HTML代码。用作tabs的UL标签和包含内容的p标签。

<ul><li><a href="#first">海阔天空</a></li><li><a href="#second">光辉岁月</a></li><li><a href="#third">真的爱你</a></li></ul>简单起见,我只写三个。

<div id="first"><p>今天我,寒夜里看雪飘过。怀着冷却了的心窝飘远方……仍然自由自我,永远高唱我歌,走遍千里。</p></div>

<div id="second"><p>钟声响起归家的讯号,在他生命里仿佛带点唏嘘……自信可改变未来,问谁又能做到。</p></div>

<div id="third"><p>无法可修饰的一对手,带出温暖永远在背后……请准我说声,真的爱你。</p></div>

所有外观不用图片,简简单单就行,因此全部使用CSS。这边我挑比较重要的写。

li{float:left;}

a{display:block;border:solid 1px #000;}

div{border:solid 1px #000;margin-top=-1px;}

.selected{border-bottom-color:#FFF; color:#F00;}//把选中tab底部的边框颜色设为跟内容背景一样的颜色

重头戏来了,那就是如何用简单的jquery实现tabs功能。

<script language="javascript"> 
$(function{ 
$('div').hide().filter(':first').show();//默认只显示第一个<div>标签中的内容。 
$('a').click(function(){ 
$('div').hide(); 
$('a').removeClass('selected'); 
$(this).addClass('selected'); 
$('div').hide().filter(this.hash).show();//这步至关重要,this.hash的意思是,当点击链接时,只显示被点击链接指向的内容。比如点击<a href="first">时就只显示<div id="first">下的内容。 
$('div'). 
}).filter(':first').click();//默认情况下,让它点击第一个按钮。 
}); 
</script>

以上是全部内容,感兴趣的可以去随便测试一下。谢谢大家。
Javascript 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 #Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 #Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 #Javascript
jquery一句话全选/取消全选
Mar 01 #Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 #Javascript
jquery中实现标签切换效果的代码
Mar 01 #Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 #Javascript
You might like
php 获取select下拉列表框的值
2010/05/08 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
小型js框架veryide.librar源代码
2009/03/05 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python中for in的用法详解
2020/04/17 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
应届生自荐信范文
2014/02/21 职场文书
小学语文课后反思精选
2014/04/25 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
项目合作意向书
2015/05/08 职场文书
运动会宣传稿50字
2015/07/23 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python