jQuery实现选项卡(tabs)效果

原创 2012年03月28日 21:03:11

<!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 language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../include/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="../../include/css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script>
 //当窗体加载完毕的时候,触发匿名函数
 //$(document)  把dom对象转换成jQuery对象
 //$(document).ready(function (){});
 $(function (){
  $("#tabs").tabs({
   event:"mouseover", //event面板激活的事件效果处理 默认是click
   //disabled:[1], //面板是否可用[1,2]
   fx:{opacity:'toggle'}, //透明度从无到有的动画效果
   selected:0 //默认选择中的面板
   
   });  //根据id选择器获取当前的id选择器的jquery对象
  //移除一个面板
  $("#tabs").tabs("remove",2);
  
  //添加一个面板
  $("#tabs").tabs("add","tab4.html","four");
  
 });
</script>
</head>

<body>

 <h1>模拟tabs效果</h1>
 <div id="tabs">
     <ul>
         <li><a href="#tab-1">面板1</a></li>
            <li><a href="#tab-2">面板2</a></li>
            <li><a href="#tab-3">面板3</a></li>
            <!--ajax请求处理 服务器处理-->
            <li><a href="./tab4.html">面板4</a></li>
        </ul>
        <div id="tab-1">
         新闻1:河北软件职业技术学院
        </div>
        <div id="tab-2">
         新闻2:河北软件职业技术学院
        </div>
        <div id="tab-3">
         新闻3:河北软件职业技术学院
        </div>
    </div>

</body>
</html>


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

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

jquery实现简单的选项卡功能

html部分 菜单一 菜单二 菜单三 菜单四 这是菜单一的内容 这是菜单...
  • wm1029218932
  • wm1029218932
  • 2015年09月18日 09:29
  • 730

ionic组件ion-tabs(选项卡)实例

ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。...
  • u011554735
  • u011554735
  • 2016年04月04日 23:03
  • 2243

JqueryUI学习笔记-选项卡tabs

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

Jquery实现选项卡tabs

tabs demo href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> ...
  • u010310183
  • u010310183
  • 2014年03月23日 15:34
  • 395

【js基础】Tab选项卡切换效果实现

课程连接:http://www.imooc.com/learn/176 html部分 Do
  • chendongqaq
  • chendongqaq
  • 2017年04月14日 20:32
  • 402

easyUI中tabs使用iframe的方式加载选项卡

使用了easyUi,发现panel组件的href比较坑人,不像extJs的html属性那样。今天遇到了tabs添加页签时需要使用iframe展示的问题,总结如下: function addTab(t...
  • liuxiao723846
  • liuxiao723846
  • 2015年01月14日 16:02
  • 1946

jQuery EasyUI 教程-Tabs(选项卡)

使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他自定义按钮。 使...
  • suncici1101
  • suncici1101
  • 2016年07月20日 13:22
  • 2356

jQuery实现tabs(标签页/选项卡)Demo

1. 需要下载的文件 jquery.min.js 2. 效果截图   通过滑动鼠标可以切换不同的tabs,并且显示不同的内容。下面是实现的效果图 3. 代码   html 选项卡 ...
  • lypf19900912
  • lypf19900912
  • 2015年04月30日 21:25
  • 4238

web实战(三)— — Tab选项卡切换效果

参考慕课网教程《Tab选项卡切换效果》:http://www.imooc.com/learn/176 基本功能有延迟切换、自动切换。本文用jquery实现1、html tab标...
  • mqy1023
  • mqy1023
  • 2016年04月19日 22:45
  • 6117
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery实现选项卡(tabs)效果
举报原因:
原因补充:

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