编程 Javascript

jQuery UI制作选项卡（tabs）

Posted in Javascript onDecember 13, 2016

先看一下效果：

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

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

jQuery UI制作选项卡（tabs）

- Author -

Tiramisu_C

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS array 数组详解

Mar 22 Javascript

js中判断Object、Array、Function等引用类型对象是否相等

Aug 29 Javascript

理解javascript中的回调函数(callback)

Sep 02 Javascript

复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)

Oct 16 Javascript

分享一个常用的javascript静态类

Dec 31 Javascript

用JavaScript判断CSS浏览器类型前缀的两种方法

Oct 08 Javascript

jsonp跨域请求数据实现手机号码查询实例分析

Dec 12 Javascript

jQuery的Cookie封装,与PHP交互的简单实现

Oct 05 Javascript

AngularJS实现动态添加Option的方法

May 17 Javascript

详解用webpack2搭建angular2的项目

Jun 22 Javascript

一步步教你利用webpack如何搭一个vue脚手架（超详细讲解和注释）

Jan 08 Javascript

详解Vue项目中出现Loading chunk {n} failed问题的解决方法

Sep 14 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