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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
javascript object array方法使用详解
Dec 03 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
php商品对比功能代码分享
2015/09/24 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
JavaScript 异步时序问题
2020/11/20 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
详解python的数字类型变量与其方法
2016/11/20 Python
关于Python的一些学习总结
2018/05/25 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python如何将多个PDF进行合并
2019/08/13 Python
python游戏开发的五个案例分享
2020/03/09 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python实现感知机模型的示例
2020/09/30 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
期终自我鉴定
2014/02/17 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
负责培养人意见
2015/06/05 职场文书
统招统分证明
2015/06/23 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
Golang连接并操作MySQL
2022/04/14 MySQL
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技