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 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
js转换对象为xml
Feb 17 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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 危险函数解释 分析
2009/04/22 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python入门篇之面向对象
2014/10/20 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python restful框架接口开发实现
2020/04/13 Python
树莓派升级python的具体步骤
2020/07/05 Python
Python中Selenium库使用教程详解
2020/07/23 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
公司薪酬管理制度
2014/01/31 职场文书
开学寄语大全
2014/04/08 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
啤酒节策划方案
2014/05/28 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
租赁协议书
2015/01/27 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python