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

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

赞 (0)

相关推荐

  • 基于JQuery的6个Tab选项卡插件

    顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2

  • JQuery Tab选项卡效果代码改进版

    介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque

  • jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE H

  • jquery tools之tabs 选项卡/页签

    虽然方便好用,但是个人觉得其在UI方面的表现不是太出彩,今天无意中看到jquery tools--一种基于jquery的UI表现框架,其UI功能展示风格类似(或模仿)flex.该框架提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以跟据自己需要下载,这样就减少了

  • JQuery 选项卡效果(JS与HTML的分离)

    在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&

  • jQuery EasyUI右键菜单实现关闭标签/选项卡

    jQuery EasyUI右键菜单实现关闭标签/选项卡

    本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: 方式一: <%@ page language="java" import="java.uti

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • Jquery组件easyUi实现选项卡切换示例

    Jquery组件easyUi实现选项卡切换示例

    本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" hre

  • jQuery之选项卡的简单实现

    jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab">    <div class="tab_menu">        <ul>            <li

  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    需要解决的问题: 比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col

随机推荐