通过jquery实现tab标签浏览效果

效果和说明文档：http://www.healdream.com/upLoad/html/jquery/tabs/index_zh.html

下载：http://www.51files.com/?2LDPUOZ0F56P52ZLDNYD

之前通过yui也实现了相同的功能，但是yui有个比较大的缺点就是js文档太大了，一个tabview.js就有60k，再加上event.js也有近60k，实在是不能承受，之前一直没有发现这个问题，自从发现了jquery之后，就对这个小巧的轻量级的客户端工具有了好感，现在如果要开发一些客户端程序的，jquery将是我的首选。

赞 (0)

相关推荐

  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • jQuery+css实现的tab切换标签(兼容各浏览器)

    jQuery+css实现的tab切换标签(兼容各浏览器)

    本文实例讲述了jQuery+css实现的tab切换标签.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • jQuery实现的tab标签切换效果示例

    jQuery实现的tab标签切换效果示例

    本文实例讲述了jQuery实现的tab标签切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jQuery实现简单的tab标签页效果

    jQuery实现简单的tab标签页效果

    本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l

  • jQuery实现tab标签自动切换的方法

    本文实例讲述了jQuery实现tab标签自动切换的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页

    所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码 复制代码 代码如下: <script type="text/javascript"> <!-- $(documen

  • DIY jquery plugin - tabs标签切换实现代码

    DIY jquery plugin - tabs标签切换实现代码

    Why DIY jquery tab 接触jquery 2,3个月了,一直都未动手写过插件.正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多). 想着jQuery这么强大的库不可能没有tabs插件吧,赶紧搜了一下,哈,果然!jQuery tabs!心里一阵窃喜,赶紧load下来用用吧.可查看了一下它的用法,才发现不太适用现有的项目耶,我们的tab每一个都对应着一个完整的页面,是用iframe嵌入的.而jQuery tab

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • jquery tab标签页的制作

    这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&

  • jquery通过a标签删除table中的一行的代码

    复制代码 代码如下: <tr> <td width="10%"> <s:property value="#owner.id" /> </td> <td width="20%"> <s:property value="#owner.name" /> </td> <td width="15%"> <s:prop

随机推荐