jQueryUI插件实现tabs效果

原创 2012年03月28日 16:21:55

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script>

$(function(){
 
 $("#tabs").tabs({
  event:"click",
  fx:{
   
   opacity:'toggle'
   },
  
  });

 
 });


</script>


</head>

<body>
<h1>tabs效果的实现</h1>
<div id="tabs">
<ul>
<li><a href="#tab_1">NO.1</a></li>
<li><a href="#tab_2">NO.2</a></li>
<li><a href="#tab_3">NO.3</a></li>
</ul>
<div id="tab_1">this is NO.1 content.</div>
<div id="tab_2">this is NO.2 content.</div>
<div id="tab_3">this is NO.3 content.</div>

</div>


</body>
</html>

基于jquery的tabsUI实现思路

基于jquery的tabsUI实现思路,乐思奇提供,爱程杨,更爱程杨!    基本的tab              主页主页主页                  主页  ...
  • sxlesq
  • sxlesq
  • 2016年04月15日 13:03
  • 3760

JqueryUI学习笔记-选项卡tabs

Insert title here $(function() { $("#tabs").tabs({ //配置当前打开的选项卡的索引,可以使用bool值或者int值,默认为1 ...
  • dc15822445347
  • dc15822445347
  • 2014年03月27日 18:26
  • 8845

jQueryUi的ajax tabs刷新问题

首先,参照例子我们可以很容易的做出这样的效果: PHPInfo这个选项卡是采用jQuery默认的ajax方式获取的页面内容,正如图中所示,内容是一个表单。 需求的情景如下: 1、在打开PHP...
  • Enbandarix
  • Enbandarix
  • 2014年03月20日 19:48
  • 1994

jquery-ui标签页组件(tabs)学习

1.默认效果 jQuery UI Tabs - Default functionality //方法很简单,没什么要说的,主要是注意...
  • lushuaiyin
  • lushuaiyin
  • 2012年03月26日 10:54
  • 4981

JQuery UI - tabs

·概述标签页插件通常用于将内容分解成多个部分,可交换查看,节省空间。有点类似于手风琴插件。官方示例地址:http://jqueryui.com/demos/tabs/·丰富的事件支持: tabss...
  • dier4836
  • dier4836
  • 2009年12月30日 22:58
  • 12687

jQueryUI插件实现accordion效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 实现手风琴...
  • zhangwei10php
  • zhangwei10php
  • 2012年03月28日 16:25
  • 966

支持多个展开的jquery折叠插件

搜遍了,终于找到了一个比较理想的 jquery-multi-open-accordion 可以替代 JQueryUI Accordion。两者用法类似,前者能同时展开多个面板,后者仅能同时展开一个面板...
  • F7ANTY
  • F7ANTY
  • 2014年04月15日 16:26
  • 1057

JQuery UI之(三)可切换面板——tabs

一、          前言Tabs组件的使用与dialog一样十分简单,  默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用. 二、          直入主题引...
  • soldierluo
  • soldierluo
  • 2009年12月13日 16:48
  • 9663

【jquery】tabs选项卡切换效果(jquery版)

以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果。 效果图如下: html 代码如下: ...
  • dyllove98
  • dyllove98
  • 2013年04月29日 13:32
  • 8960

jquery ui tab ajax 切换,默认选中第一个(序号为0)

$(function() { var tabss = $('#tabs').tabs();//[object,object] var selectedTab = tabss.tabs('o...
  • big1989wmf
  • big1989wmf
  • 2017年04月12日 16:20
  • 396
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQueryUI插件实现tabs效果
举报原因:
原因补充:

(最多只允许输入30个字)