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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 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
单位速度在实战中的运用
2020/03/04 星际争霸
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript中Function类型详解
2015/04/28 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python中的heapq模块源码详析
2019/01/08 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
接口可以包含哪些成员
2012/09/30 面试题
环保专业大学生职业规划设计
2014/01/10 职场文书
事业单位请假制度
2014/01/13 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
老公婚前保证书
2015/02/28 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS