jQuery UI制作选项卡(tabs)


Posted in Javascript onDecember 13, 2016

先看一下效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
再探JavaScript作用域
Sep 24 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
详解Bootstrap各式各样的按钮(推荐)
Dec 13 #Javascript
javascript动画系列之模拟滚动条
Dec 13 #Javascript
js闭包用法实例详解
Dec 13 #Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 #Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 #Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 #Javascript
You might like
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
js 页面输出值
2008/11/30 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python异步存储数据详解
2019/03/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
什么是TCP/IP
2014/07/27 面试题
JPA的特点
2014/10/25 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
中专自我鉴定
2014/02/05 职场文书
超市中秋节活动方案
2014/02/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书