jQuery EasyTabs.js简单实用Tabs插件

今天分享一个jQuery 简单实用Tabs插件-EasyTabs.js。

官方地址：

http://os.alfajango.com/easytabs/#tabs1-html

EasyTabs.js 是一个轻松实现 Tabs 组件的 jQuery 插件，支持多种不同外观。

可以采用自带的样式也可以自定义样式。

jQuery 1.4.3+

支持一下浏览器：

Internet Explorer 7+

Firefox 4+

Chrome

Safari

Opera 11

 

示例代码：

 代码如下 复制代码
<div id="tab-container" class="tab-container">
  <ul class='etabs'>
    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
  </ul>
  <div id="tabs1-html">
    <h2>HTML Markup for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-js">
    <h2>JS for these tabs</h2>
    <!-- content -->
  </div>
  <div id="tabs1-css">
    <h2>CSS Styles for these tabs</h2>
    <!-- content -->
  </div></div>

href 指向该tab对应的内容页面。只能用id，不能用class。

较jquery自带的tabs样式更好看，更大方美观。

 

支持ajax请求：

 代码如下 复制代码

  <li class='tab'><a href="/easytabs-ajax.html #html-content"
   data-target="#tabs-ajax-html">HTML Markup</a></li>
   <li class='tab'><a href="/easytabs-ajax.html #js-content"
   data-target="#tabs-ajax-js">Required JS</a></li>

原文来自:http://www.suchso.com/UIweb/Jquery-simple-beautity-EasyTabs.html

时间： 2024-08-02 19:59:50

jQuery EasyTabs.js简单实用Tabs插件的相关文章

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

言归正传,以下是全文. 先附上两张最简单的效果图. 首先编写简单的HTML代码.用作tabs的UL标签和包含内容的p标签. <ul><li><a href="#first">海阔天空</a></li><li><a href="#second">光辉岁月</a></li><li><a href="#third">真的爱

asp.net jquery无刷新分页插件(jquery.pagination.js)_实用技巧

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

快速学习jQuery插件 jquery.validate.js表单验证插件使用方法_jquery

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

学习使用jquery iScroll.js移动端滚动条插件_jquery

大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下. iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上. iScroll的使用方法: iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM

表单验证代码实例:jquery.validate.js表单验证插件

文章简介:很好用的JQuery表单验证插件--jquery.validate.js. jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jquery-1.4.2.min.js和jquery.validate.min.js. 下面演示如何使用jquery.validate.js插件进行表单的验证. 这是HTML表单:<form id="regFro

jquery.validate.js表单验证插件的用法和入门范例

网上介绍的jquery.validate大部门只是介绍它的api和用法,没有一个完整的入门范例,有时候看半天才知道该怎么下手.因此为了快速了解学习,我弄了一个快速入门范例,虽然用的知识点不多,写的也不是很好,但是可以快速的入手. 以下是参考源码(下面有源码网上可以下载到在此不再提供): <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf

js 简单实用的点击可显隐层效果

提示:您可以先修改部分代码再运行 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <title>简

jquery-miniTable简单实用表格插件

支持: 1.表头自定义 2.动态删除 添加 获取行数据 3.设置自定义样式 4.支持事件回调  代码如下 复制代码   var phone_column = ["编号", "手机号码", "IMSI", "添加时间", "操作"],      var phone_option = { tColumns: phone_column }                 var row = [];        

js 简单实用的图片放大效果