jQuery UI制作选项卡（tabs）

momode 2016-12-13

先看一下效果：

jQuery UI制作选项卡（tabs）

Jquery-UI 选项卡的制作实际上是利用锚点链接的原理，实现起来非常的简单。

第一步：引入 jquery 和 jquery-ui 文件。
以下是我的head部分的代码：

<head> 
  <meta charset="UTF-8"> 
  <title>选项卡</title> 
  <link rel="stylesheet" href="style.css"> 
  <script type="text/javascript" src="../libs/jquery-1.8.3.js"></script> 
  <script type="text/javascript" src="../libs/jquery-ui-1.9.2.custom.js"></script> 
  <script type="text/javascript" src="script.js"></script> 
</head>

第二步：写面板布局。

<body> 
  <div id="tab"> 
    <ul> 
      <li><a href="#tab-1" class="isSlected">TAB1</a></li> 
      <li><a href="#tab-2" class="unSlected">TAB2</a></li> 
      <li><a href="#tab-3" class="unSlected">TAB3</a></li> 
    </ul> 
    <div id="tab-1">TAB1内容-人民网北京12月9日电 （唐嘉艺）本周，天津任市委常委、市纪委书记；</div> 
    <div id="tab-2">TAB2内容-湖南省十二届人大六次会议闭幕，湖南省代省长许达哲当选省长。 
    北京、天津、上海、湖北省级党委班子迎来新成员：北京市副市长林克庆任北京市委常委；中央国家机关纪工委书记邓修明“空降”</div> 
    <div id="tab-3">TAB3内容-上海市副市长周波任上海市委常委；湖北省副省长任振鹤、十堰市委书记周霁任湖北省委常委。</div> 
  </div> 
</body>

其中 id="tab"的div用来包裹我们的整个选项卡，ul中的内容就是我们点击切换内容的部分，ul下方的div是当我们切换选项卡所展示的内容。

其中的a标签 href="#tab-1"，href="#tab-2"，href="#tab-3"，分别对应div中的 id="tab-1",id="tab-2",id="tab-3"。选项卡的样式和点击选中之后的效果我们可以自己定义成想要的样子。

第三步：编写脚本。
这里我们同样要在dom加载完成之后开始运行我们的代码，选取到我们的tab之后，使用.tabs()方法即可实现选项卡功能。

$(function(){ 
  $("#tab").tabs(); 
});

非常简单的几个步骤即可实现简单的选项卡功能，具体样式效果可根据自己的需求来编写。
现附上该例子源码地址：https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/tab

momode

momode

相关推荐

第一阶段冲刺7

初步整合三部分代码，修复漏洞！昨天基本完成了APP界面下方的选项卡的操作，今天对他的样式进行了一定优化，并且正在学习并尝试制作APP的第一个功能界面，但是我对Androidstudio的界面的格式的布局还不是很了解，以至于不能成功绘画出课程表的表格布局，遇

APCDE / 0评论 2020-06-11

想自学前端，该怎么开始学，从哪学起呢？

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。CSS基础知识颜色，字体，位置，盒子模型等。CSS Grid和Fle

viewerlin / 0评论 2020-05-25

Android基础——高级UI组件：选项卡

--选项卡里面需要两个布局文件：一个是上面标签的布局，一个是下面内容的布局-->

安辉 / 0评论 2020-01-25

TotalFinder for Mac(Finder增强工具)：双模式

下面给大家带来TotalFinder for Mac：双模式，希望能够帮助大家更快的熟悉TotalFinder for Mac这款Finder增强工具！同时本站也上线了TotalFinder for Mac中文版，喜欢这款软件的可以来本站下载体验！双模式是

adc00 / 0评论 2020-01-04

fiddler——查看http响应

http响应可能是一个html文件、可能是一个图片、可能是一个json等。、如果http响应是html文档，可以使用web view选项卡来查看；、如果http响应是json，可以使用json tab选项卡来格式化json；

老高 / 0评论 2019-12-30

Android开发：制作底部选项卡TabHost

<TabHost. android:id="@android:id/tabhost". <LinearLayout. <!<FrameLayout. <TabWidget. android:id="

luoj / 0评论 2011-09-13

在红旗Linux中的ftp实验配置过程

1打开图形管理工具 2 默认FTP站点上点击右键在选择属性。绝对路径选择项选择“浏览”并指定到／DATA目录中。在第75行修改内容为。1以外的所有主机都可以访问FTP服务器。欢迎和退出对话框中可以输入用户登录FTP服务器和退出登录时的文字信息。单击应用、确

xiaoguolaoshi / 0评论 2008-07-20

Android 选项卡(TabHost)例子

在Android中实现选项卡的效果可以通过两种方式：在布局文件中引用TabHost，在Activity中通过Id获取TabHost的实例，或者直接继承TabActivity，直接获取TabHost的实例。-- set the tab title attri

Rgenxiao / 0评论 2011-09-08

jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换

支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换图片就不上了，很多效果，直接看演示演示地址:http://www.corange.cn/demo/3803/index.html<!DOCTYPE html PUBLIC "-//W3C//

支离破碎 / 0评论 2014-06-30

简单的jQuery选项卡插件

原理其实也是很简单的，关键在于样式的定义。原本想直接使用jquery的 ui，无奈懒得理，感觉jquery ui很强大，但是用起来也很麻烦，要引用的样式也多。主要是样式不好修改。并且我也只想使用选项卡的功能，何必整这么多样式呢。

qiuhaotc / 0评论 2012-02-19

jQuery插件应用之 --- 选项卡插件的使用

jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，这种效果称”手风琴”，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。collapsible

85931235 / 0评论 2012-03-28

微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

本文实例讲述了微信小程序开发实现的选项卡页面切换功能。分享给大家供大家参考，具体如下：。总算做出来了.分享出来看看.'on' : ''}}" data-current="0" bindtap="swichNav&qu

bruceli / 0评论 2019-05-14

基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考，具体如下：。jquery这款杀手级别的js框架，显然已成了开发界的标准js库，在开发一般web应用的时候，常常用到。今天找到一个实现jquery tab页的插件，效果还不错，比自己

南城小伙 / 0评论 2019-06-10

jquery实现选项卡切换代码实例

选项卡在网页中很常见，可以说是必备的一个元素了，网上其实也有很多案例讲解选项卡的做法，各种炫酷。写这篇文章，就是记录下自己的一个练手Demo了。主要逻辑就在于找到选项卡和内容框相对应的下标。以上所述是小编给大家介绍的jquery实现选项卡切换详解整合，希望

逆风飞舞0 / 0评论 2019-05-14

[转] CentOS 安装中文输入法

在linuxCentOS中安装完中文输入法之后，还不能使用，必须进行相应的设置，就如同在windows中设置中文输入法一样，必须把刚刚安装的输入法添加爱到输入法列表中。

87530399 / 0评论 2014-05-26

Win10系统IE11兼容性的具体设置方法

　　现在很多使用Windows系统的用户都在考虑，自己是否需要将系统升级到Win10系统，而很多用户主要是考虑到Win10系统的兼容性如何。要是和Win10以前的系统相比较，其实Win10系统的兼容性肯定没那么好，但随着微软的不断完善，所以Win10对兼容

chenyangah / 0评论 2017-03-31

Win10 PC预览版14971已修复和已知问题汇总

微软今天向快速通道Insider成员推送了Windows 10创造者更新预览版14971，带来一些新功能，下面我们来看下已修复和已知问题。最初在14926版本中引入，Microsoft Edge中的选项卡上的实验性“Snooze”操作，为您提供一种方法来设

84236532 / 0评论 2016-11-17

如何解决WinXP电脑IE提示“此选项卡已经恢复”

　　WinXP电脑IE提示“此选项卡已经恢复”的解决方法就讲到这里了，只要在IE浏览器的Internet选项进行一些设置，之后重启就可以了。

zhangpuego / 0评论 2016-07-16

Win10系统无法识别USB设备的解决方法

最近老是有用户反应Win10系统的电脑总是出现USB接口无法识别设备的问题，导致U盘、移动硬盘等无法使用，甚至连本来正常连接的USB鼠标都发生了异常，这严重影响了用户Win10系统的使用。下面小编就给大家带来解决办法，一起来看看吧。　　4.在任务管理器的“

Jiminull / 0评论 2016-03-03

Win10以太网属性空白布线时网络选项卡该怎么办?

我们一般会在网络适配器属性中修改网络DNS和IP，在Win10中本地连接适配器一般被命名为以太网，有时打开以太网属性在网络选项卡中会发现列表显示为空白，如下图所示：。在任务栏搜索框中输入“服务”，回车打开服务。找到名为Network Setup Servi

小李匪盗 / 0评论 2015-12-21

win10桌面背景不显示怎么办 win10桌面背景不显示解决办法

在升级win10后，有朋友反映说Win10桌面背景不显示大家不用着急现在小编就为大家带来出现Win10桌面背景不显示的解决办法，感兴趣的朋友可以一起看看。　　首先我们先打开系统设置，在系统设置面板就会有一个“轻松使用”选项卡，我们选择该选项卡。　　当显示w

LiTOPPPP / 0评论 2015-08-23

win10系统更新高级选项里没有快速选项卡怎么办?

微软正式发布新一代操作系统Windows 10。Win7/Win8.1用户可以通过系统升级或腾讯电脑管家等方式，免费升级Windows 10正式版，Windows XP/Vista等用户则需通过购买获得。但有很多童鞋急着想升级到WIN10的时候发现，本来应

yuanbin / 0评论 2015-08-05

Win8 IE浏览器如何关闭弹出是否关闭所有选项卡的警告

　　很多使用Win8系统的用户抱怨，IE浏览器打开多个选项卡时，如果点击浏览器窗口的关闭按钮，就会弹出是否关闭所有选项卡的警告。这问题该怎么解决呢?　　1、打开“Internet选项”——“常规”——“选项卡”;　　用IE浏览器打开多个选项卡，比如在新选项

cooldgjk / 0评论 2015-03-18

Windows7如何关闭IE浏览器选项卡浏览以防误关闭

　　我们在使用IE浏览器时，默认都是使用选项卡浏览的，这样使得我们的浏览更加方便。　　2、打开Internet选项后点击选项卡区域的“设置”按钮;　　3、在选项卡设置页面，取消勾选“启用选项卡浏览”的选项，然后确定;　　4、关闭IE浏览器，然后重新打开，设

Techzero / 0评论 2015-03-11

Win8系统下使用IE11浏览器保护个人隐私安全

zchen / 0评论 2014-12-15

设置win7系统IE浏览器不使用选项卡浏览以防误关闭

　　2、打开Internet选项后点击选项卡区域的“设置”按钮;　　3、在选项卡设置页面，取消勾选“启用选项卡浏览”的选项，然后确定;　　以上设置适合一些有特别需求的朋友使用，当然你够复古也可以这样用，起码不会一不小心就把全部网页都关闭了

Techzero / 0评论 2014-11-29

Windows 8.1更新补丁KB2919355无法安装的解决方法

Windows系统安装更新补丁有时候会出现一些问题。此前有用户在网上表示，他的Windows 8.1电脑无法安装代号为KB2919355的系统补丁。Windows 8.1 更新 无法安装,造成这个问题，可能是由于第三方软件干扰，或者系统组件损坏导致的，建议

mahara / 0评论 2014-10-19

让你的Windows XP系统电脑实现急速关机的方法介绍

使用老机器和笔记本电脑的朋友，恐怕都难容忍慢得让人发疯的系统启动过程吧。即使试遍了各种优 化秘籍，使用了所有优化软件，但WindowsXP还是慢悠悠的开机，慢腾腾的关机，让人沮丧不已。其实，WindowsXP早就为你准备好了一个快速开 关机的捷径，它就是待

86457706 / 0评论 2013-07-16

Windows XP系统中终极优化设置方法介绍

chenyangah / 0评论 2013-06-12

windows7系统开机时间减短方法小结

点选不必要的启动项前的复选框，如skype, 暴风媒体中心，迅雷7等。之后系统可能提示重启，我们暂时先不重新启动。在设备管理器的树形菜单中找到“IDE ATA/ATAPI 控制器”，英文是IDE ATA/ATAPI Controller。双机后打开属性窗口

BearTang / 0评论 2013-06-12

windows7系统的显卡设置图解

打开“控制面板”，找到并点击“Inter GMA Driver”进入。切换至“显示”→“一般设置”选项卡，在此，就可以对屏幕分辨率进行设置了。通过对3D首选项进行设置，可选择显卡的性能特征以及显卡的重点优化部分。点击“电源”选项卡，然后就可以选择一种优化电

hubing / 0评论 2013-06-06

windows XP文件夹右键属性中没有“安全”选项卡

如果该分区不属于NTFS格式，那么在分区或文件夹属性中将无法看到“安全”选项卡。如果要将分区的格式转换为NTFS，例如把D盘转换为NTFS格式，可以运行“convert D： /FS：NTFS”进行无损转换。Windows XP默认情况下是启用该功能的，在

dotstar / 0评论 2013-05-22

Win10 Build 14291开始推送:新增支持Edge扩展

今天大概是微软比较忙碌的一天，在面向WP8.1用户推送Win10 Mobile正式版升级之后，又向Win10 PC版Insider用户推送了RedStone 14291预览版升级，现在Windows 10 Mobile预览版用户也同样迎来RedStone

Jiminull / 0评论 2016-03-17

Linux VPN Install needs 10 steps

你需要在内核级用它简化安装和配置。这将在安装过程中使几乎所有东西对用户透明。点对点协议安装你的“调制解调器”或任何组成你的连接的设备。如果modprobe命令成功，执行echo命令。Modprobe向Linux内核添加模块，而echo只是将你所说的写到终端

sdfshfh / 0评论 2009-04-03

jquery选项卡插件

把选项卡整合了一下，写成个插件，这样可以整个站，或整个页面有多个选项卡时，统一调用。代码的具体注意事项已经写进注释了。用于js获取元素的class名称必须有，选项卡本身的样式，另再取一个名字来设置。这样也在一定意义上实现了行为和样式的分离。.js_tab{

zhaoqidev / 0评论 2018-01-27

jQuery 滑动选项卡jQuery tabulous.js

--End tabs-->复制Initiate the pluginOnce you have created your tabs you will need to initiate the plugin.At its most basic leve

honeyth / 0评论 2017-01-24

jQuery 滑动选项卡jQuery tabslet

Yet another jQuery plugin for tabs, lightweight, easy to use and with some extra features

87413460 / 0评论 2017-01-23

jQuery 选项卡 CleverTabs

CleverTabs是一款jQuery插件，所需jQuery版本:1.6.1，jQuery UI样式版本:1.8.13；其功能为创建jQuery UI风格的Tab用于显示iframe。本示例中符加了jQuery.contextMenu插件，我修改了其样式，

JeWangZhe / 0评论 2017-01-20

Jquery UI tabs

只有ajax时，添加的ajax选项才起作用。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jqueryajax，这里不做详解。。。$.tabs;//这里是将异步改为了同步。

XHQT0 / 0评论 2014-09-26

jquery左右滑动的选项卡,tab标签

css代码和js文件在演示页面可以查看源码。本例只放了2个tab，需要更多的话也很方便添加

84483368 / 0评论 2014-02-20

jQuery 选项卡，仿腾讯迷你首页，清爽无修饰版

#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}. #tab

有心就有方向 / 0评论 2013-11-03

AJAX jQuery tab选项卡

=0){$('#pageContent').html(msg);$('#loading').css('visibility','hidden');}}});}load_page.php. PHP Code<?phpif(!

hackcat / 0评论 2013-10-30

AJAX TAB JQUERY 选项卡 标签

AJAX TAB JQUERY 选项卡 标签演示js

85173253 / 0评论 2013-10-03

JQUERY插件学习之jQuery UI

jQueryUI是以jQuery为基础的开源JavaScript网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容　　IE6.0+,Firefox3+,Safar

yongqiling / 0评论 2013-08-20

Jquery实现仿京东滑动选项卡

上京东商城时发现那个滑东选项卡有点意思，今天终于手贱，用JQURY自己动手做了一个，样式是从京东搞下来的，代码虽然一点点，可是花了一晚上去除多余的样式，真心累。代码放CSDN上，挣点积分再说，如果您觉得我的文章给了您帮助，请为我买一杯饮料吧！

卧斋 / 0评论 2013-05-22

ajax dojo 使用中 tabbedpanel 选项卡 切换问题

struts2 中jsp页面使用选项卡 我的方案是: struts2.1.6 加入jar包: struts2-dojo-plugin-2.1.6.jar. jsp 页面使用 dojo 的标签库; <%@ taglib uri="/strut

tomatoboryj / 0评论 2010-01-03

jquery tabs详解

只有ajax时，添加的ajax选项才起作用。上面的例子中，添加了beforeSend和success两个选项。ajax还有一些选项请参考jqueryajax，这里不做详解。。。$.tabs;//这里是将异步改为了同步。

lining / 0评论 2012-12-31

jQuery MiniUI 开发教程 导航控件 Tabs：选项卡（五）

<divid="tabs1"class="mini-tabs"activeIndex="0"style="width:350px;height:200px;">.

钱多多 / 0评论 2012-12-24

PowerDesigner常用功能

打开powerdesigner，选择File-->ReverseEngineer-->Database……在Selection选项卡中选：Usingscriptsfiles：添加刚才的导出的sql脚本。配置的前提是要有装oracle的驱动程序，

luxuheng / 0评论 2012-09-17

table选项卡从A页面点击进入B页面指定版块

不知道，怎么搞的，昨天明天写上去的，发布成功的。早上找不到了，奇怪，差异。jquery博客昨天又加班了，早8点去晚8点回来，赶项目没法子，细细算这个月除了清明时候休息2天，之外一直上班中。稀里糊涂的想整个table选项卡从A页面点击进入B页面指定版块，不知

sunnygirls / 0评论 2012-09-08