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>

以上是全部内容，感兴趣的可以去随便测试一下。谢谢大家。

if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 84329;
var cb_entryId = 1966064;
var cb_blogApp = "jquerywong";
var cb_blogUserGuid = "5ce11fdc-b341-e011-ac81-842b2b196315";
var cb_entryCreatedDate = '2011/2/26 23:44:00';

赞 (0)

相关推荐

  • 一步一步制作jquery插件Tabs实现过程

    tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大

  • idTabs基于JQuery的根据URL参数选择Tab插件

    idTabs基于JQuery的根据URL参数选择Tab插件

    为了做这件事,除了jquery库和idTabs插件,我们还需要下载一个用来搞URL的插件:jquery.url.js,传送门:https://github.com/allmarkedup/jQuery-URL-Parser (上述链接可能有错,如不能使用,可以到这里下载) 我们提供idtabs打包下载 http://www.jb51.net/jiaoben/43086.htmlTab菜单的HTML代码这样写,每个tab的div自己搞定,不发出来浪费页面了: 复制代码 代码如下: <div cla

  • jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

  • 基于BootStrap环境写jQuery tabs插件

    基于BootStrap环境写jQuery tabs插件

    一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs的想法,之前也在网上找了半天,并不是很满意. 下面来看看我的实现过程: 首先是HTML部分,HTML部分按照结构简约,突出干货的思路来设计.选项卡使用了列表,在列表中插入了超链接,当然这里的超链接只是作为按钮使用的,当点击任何一个链接,就切换到对应的选项卡.选项卡的内容部分直接使用DIV,将图书的展示一

  • 基于Jquery的简单&简陋Tabs插件代码

    HTML代码 复制代码 代码如下: <div class="tab"> <li class="selected" >1</li> <li class="hover">2</li> <li class="hover">3</li> </div> <div class="tab_box"> <div

  • 使用JQUERY Tabs插件宿主IFRAMES

    使用JQUERY Tabs插件宿主IFRAMES

    必备的东西: Windows XP/Vista/7/2003/2008 Visual Studio 2005 or 2008 (download the correct version of Home Site project above) .NET Framework 2.0 and ASP.NET AJAX 1.0 今天,很多浏览器提供了使用tab的能力去浏览更多的网页和网站.当然这是一个非常有用的功能来替代同时打开几个浏览器,但如果提供在一个页面中浏览多个网页也非常的不错. 例如,如果你的

  • 通过Tabs方法基于easyUI+bootstrap制作工作站

    通过Tabs方法基于easyUI+bootstrap制作工作站

    登陆页如下所示: 下面给大家展示下具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <title>网络医院登陆</title> <st

  • 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">真的爱

  • jQuery实现的简单无刷新评论功能示例

    jQuery实现的简单无刷新评论功能示例

    本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr

  • jQuery实现的简单折叠菜单(折叠面板)效果代码

    jQuery实现的简单折叠菜单(折叠面板)效果代码

    本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

  • jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码

    心血来潮想为自己的小项目做一个提醒系统,譬如私信,评论等消息都能及时传递过来.由于道行尚浅,网上那些长轮询对于我略微复杂,于是觉得还是自己写一写试试比较好. 我的思路是,单独在数据库中建一个提醒表,表主要由接收者的id和消息类型两个字段组成 /* 前台提醒表 */ CREATE TABLE IF NOT EXISTS notification( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 主键自增 mid INT NOT NULL DEFAULT

  • jquery中取消和绑定hover事件的实现代码

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

  • iOS中实现简单易懂秒杀倒计时／倒计时代码

    iOS中实现简单易懂秒杀倒计时／倒计时代码

    示例代码简单易懂: #import <uikit uikit.h=""> @interface ViewController : UIViewController @property (weak, nonatomic) IBOutlet UILabel *dayLabel; @property (weak, nonatomic) IBOutlet UILabel *hourLabel; @property (weak, nonatomic) IBOutlet UILabel

  • Android Studio中快捷键实现try catch等功能包含代码块的实现方法

    Android Studio中快捷键实现try catch等功能包含代码块的实现方法

     Android Studio中快捷键实现try catch等功能包含代码块 1.windows系统下,只需选中需包含的代码块,按快捷键Ctry+Alt+T即可: 2.Ubuntu下由于快捷键已经被占用,故需要自行重新设定,设定过程如下: 点击file--->setting--->keymap 在右侧搜索栏中搜索surround,选中Surround With...,先点击右键,选择Remove Ctrl+Alt+T,然后再设置可行的快捷键即可. 如有疑问请留言或者到本站社区交流讨论,感谢阅读

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • JavaScript实现简单的图片切换功能(实例代码)

    代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; margin: 50px auto; padding: 20p

  • 菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......不仅是你,我都有点反感了,不仅要判断浏览器,还要......反正就是有一大坨代码,看起来毫不爽,现在,让我们忘记拿一大坨吧(记住:这里不是真的忘记哦!好像许多公司面试Ajax这块内容时,都会让你不用拖控件的方式写一个原生态的Ajax程序呢,所以它的重要性,你懂的!)!好了,说了这么多,应该"忘记"了吧你!呵呵....

随机推荐