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

言归正传,以下是全文。

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

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

<ul><li><a href=#>

<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=#>$('div').
}).filter(':first').click();//默认情况下,让它点击第一个按钮。
});
</script>

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

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours(); //获取当
Jquery代码 复制代码 代码如下: script type="text/javascript" src="jquery-1.4.2.min.js"/script script type="text/javascript" function Checked(){ //定义函数checked $(".chk").each(function(){ //遍历html中class为chk的复选框标签 if($(this).attr("checked") == true){ //如果当前复选框的checked属性
有些情况下,同一个form在不同的情况下提交到不同的处理动作,可以在js中动态改变form的属性,满足不同条件的form提交需求。 如: 复制代码 代码如下: form id="form" name="form" method="POST" enctype="multipart/form-data" action="action1.jsp" target="iframe" input type="file" name="file" id="file" class="input_text80"/input i
由于顶级对象是使用类库几乎所有功能的入口,在编码中会频繁地输入这几个字符,因此在设计类库时,顶级对象名输入的简便性也是相当重要的。 在此将从对象名称的长度、输入对象名称的按键顺序这两个方面对三个类库进行重点比较,同时力求照顾到一些特别的点,从而得出一个较为全面的评测结果。 名称长度 jQuery共有6个字符组成,从长度上而言是三个类库中最长的一个,同时包含了一个大写字母Q,在输入过程中需要加入一次SHIFT键,因此长度值给定为7。 Ext共有3个字符组成,在长度上是最有优势的,由于首字母为大写字母E,输入过

js 函数调用模式小结 - 2015-04-13 20:04:06

方法调用模式 当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上。 复制代码 代码如下: var myObject={ name : "myObject" , value : 0 , increment : function(num){ this.value += typeof(num) === 'number' ? num : 0; } , toString : function(){ return '[Object:'+this.name+' {value:
打包用到的批处理文件代码如下: 复制代码 代码如下: @echo off title Builder - 正在合并 ... color 03 REM ===================================== REM jsbuilder beta版 REM REM ===================================== SETLOCAL ENABLEEXTENSIONS echo. REM 过滤文件后缀,只combo js文件 if "%~x1" NEQ ".js" (
在一个前端页面上,需要通过JavaScript来提交参数,使用JS创建form表单,将参数append到表单中进行提交,代码如下: Js代码 : 复制代码 代码如下: functionloadConfig(gameUrl,skinId){ vartemp=document.createElement("form"); temp.action="${createLink(controller:'mobileConfig',action:'beforeLaunchConfig')}"; temp.method=
上次介绍了怎么利用NodeJS + PhantomJS进行截图,但由于对每次截图操作,都启用了一个PhantomJS进程,所以并发量上去后,效率堪忧,所以我们重写了所有代码,并将其独立成为一个模块,方便调用。 如何改进? 控制线程数,以及单线程处理url数量。使用Standard Output WebSocket 进行通讯。添加缓存机制,目前使用Javascript Object进行。对外提供简易的接口。 设计图 依赖 安装 由于PhantomJS 1.9.0+才开始支持Websocket,所以我们先要确

Express.JS使用详解 - 2015-04-13 20:04:04

安装了node(下载)之后, 在你的机器上创建一个目录,开始你的第一个应用程序。 $ mkdir hello-world 在这个目录中你将定义应用程序“包”,这和任何其他node的包没有什么不同。文件目录中的json文件,明确定义了一个依赖项。你可以用npm命令获取express最新版本,你喜欢这样做,而不是安装“3.x”以外的版本,以防止任何未知的惊喜。 { "name": "hello-world", "description": "hello world test app", "version":

nodejs教程之入门 - 2015-04-13 14:04:35

前言 再不学nodeJs,我们就老了......在HTML5大浪袭来的时候,很多先辈就开始了NodeJs之旅,而那时我还在做服务器端的程序 后来转成前端,和梯队的距离已经很大了,因为我会服务器端语言,还干了很久,所以至今才开始学习NodeJs,向完整的前端前进 这次学习NodeJs的计划是: ① 1-2周学习基础知识 ② 1周左右开发一个简单项目 ③ 利用NodeJs开发一套用于移动端调试的工具 ④ 打包相关(这个可能比较远了) NodeJs特点 ① 异步 从文件读取到网络请求,NodeJs皆以异步完成,