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中的prototype使用说明
Apr 13 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 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
VOLVO车载收音机
2021/03/02 无线电
数据库中排序的对比及使用条件详解
2012/02/23 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php并发加锁示例
2016/10/17 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python访问抓取网页常用命令总结
2017/04/11 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python实现图片转字符画的示例
2017/08/22 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
python中pyplot基础图标函数整理
2020/11/10 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
出纳员的岗位职责
2014/02/22 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
节约用水倡议书
2014/04/16 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
免职证明样本
2014/10/23 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python torch.flatten()函数案例详解
2021/08/30 Python