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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
Js 本页面传值实现代码
May 17 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
详解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数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
js 对象是否存在判断
2009/07/15 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Python fileinput模块使用实例
2015/06/03 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
如何使用python写截屏小工具
2020/09/29 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
自荐书4要点
2014/01/25 职场文书
电子信息工程自荐信
2014/05/26 职场文书
模具专业求职信
2014/06/26 职场文书
2014年中秋寄语
2014/08/11 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android