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 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
关于Python解包知识点总结
2020/05/05 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
市级三好学生评语
2014/12/29 职场文书
考研复习计划
2015/01/19 职场文书
小学班长竞选稿
2015/11/20 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers