以前写winform程序的时候tab控件是非常容易使用的，写网页时确费了我不少劲，主要原因是jQuery的混乱。

　　有很多前端控件都提供tab，像bootstrap等，这里只说jQuery的。

　　下载相应的jQuery的代码和css样式，注意css样式文件必不可少，要不然就出不了tab的效果。范例代码如下：

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Tabs</title>

  <link rel="stylesheet" href="js/jquery/ui/themes/base/jquery.ui.tabs.css" />
<link rel="stylesheet" href="js/jquery/ui/themes/base/jquery.ui.tabs.css" />

  <script src="js/jquery/jquery-1.7.1.min.js"></script>

  <script src="js/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>

  <script src="js/jquery.ui.core.min.js"></script>
　<script src="js/jquery.ui.widget.min.js"></script>

  <script>

  $(function() {

    $( "#tabs" ).tabs();

  });

  </script>

</head>

<body>

<div id="tabs">

  <ul>

    <li><a href="#tabs-1">tab-1</a></li>

    <li><a href="#tabs-2">tab-2</a></li>

    <li><a href="#tabs-3">tab-3</a></li>

  </ul>

  <div id="tabs-1">

    <p>tab1</p>

  </div>

  <div id="tabs-2">

    <p>tab2</p>

  </div>

  <div id="tabs-3">

    <p>tab3</p>

  </div>

</div>

</body>

</html>

几点注意事项：

1、代码中是我用的几个文件组合，由于jQuery代码各种混乱，没准有别的组合，或者不同的版本也可以，但是需要注意的是css和js都是必要的。

2、js代码载入的次数和顺序决定程序能否正确执行。一定要先载入jQuery的代码再载入jQuery.ui的代码，我一开始不对就是因为这个问题。

3、jquery.ui.core.min.js和jquery.ui.widget.min.js是tab控件的两个依赖项，若出现问题时可考虑是否是缺少这部分js代码。

使用jQuery的tab控件的更多相关文章

  1. 扩展easyUI tab控件，添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. Web端的Tab控件在切换Tab时Load数据出错的处理

    我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...

  4. 开源框架之TAB控件

    我的开源框架之TAB控件   需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...

  5. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  6. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  7. 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>

    上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...

  8. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  9. NVelocity+Bootstrap tab控件 异常之

    异常信息:Encountered "tings" at line 54, column 55.Was expecting one of:   "(" ...   ...

随机推荐

  1. CodeForces - 320B Ping-Pong (Easy Version)

    题目最开始 完全不懂 配合案例也看不懂-_- 总之就是用传递性 问能否从a区间到b区间 dfs(x,y) 走遍与第x区间所有的 联通区间 最后检验 第y区是否被访问过 是一道搜索好题 搜索还需加强 # ...

  2. BZOJ2196: [Usaco2011 Mar]Brownie Slicing

    n<=500 * m<=500的方阵,先沿横坐标切A-1刀,再把每一块切B-1刀,得到A*B块,求这A*B块的数字之和的最小值的最大值. 最小值最大--二分,然后贪心切.每次扫一行,看这一 ...

  3. Shell脚本的编写,sed的使用以及一些正则表达式

    Shell脚本的简单编写以及sed的使用 标签(空格分隔): 博客文章 前一阵子为了批量修改Web审计规则,故编写了一个Shell脚本,顺便使用了下sed,顺便把正则表达式也重新学习一遍,感觉还是需要 ...

  4. 离线配置Anaconda3+tensorflow-gpu1.4.0+cuda8.0+cudnn6.0

    1.首先下载anaconda3 ----从官网上下载Anaconda3-5.1.0-Linux-x86_64.sh 直接通过命令 bash Anaconda3-5.1.0-Linux-x86_64.s ...

  5. React学习及实例开发（三）——用react-router跳转页面

    本文基于React v16.4.1 初学react,有理解不对的地方,欢迎批评指正^_^ 一.定义路由 1.安装react-router npm install react-router@ --sav ...

  6. Javascript小数取整方法收集

    1.丢弃小数部分,保留整数部分 parseInt(7/2) 2.向上取整,有小数就整数部分加1 Math.ceil(7/2) 3.四舍五入 Math.round(7/2) 4.向下取整 Math.fl ...

  7. 转: 将Eclipse代码导入到AndroidStudio的两种方式

    评注: 讲解的非常之详细 转自:    http://www.cnblogs.com/ct2011/p/4183553.html 说到使用AndroidStudio,除了新建的项目,我们都会面临的问题 ...

  8. Python使用django搭建web开发环境

    安装 Python 去 Python 官方网站找到 Python 3 的下载地址,根据你的系统选择 32 位或者 64 位的安装包,下载好后双击安装即可. 检测是否安装完成 C:\WINDOWS\sy ...

  9. url优化|隐藏index.php

    隐藏index.php   一.codeigniter codeigniter和许多php框架一样,有个单一入口index.php,从url上看,显得很不友好.通过apache的rewirte,是可以 ...

  10. centos7 安装配置openstack-dashboard （官网openstack-juno版）

    感谢朋友支持本博客.欢迎共同探讨交流.因为能力和时间有限.错误之处在所难免.欢迎指正! 假设转载.请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...