jQuery插件--实现tabs面板效果

原创 2012年03月28日 17:30:12

<!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>模拟tabs效果</title>
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" href="./css/jquery-ui-1.8.18.custom.css" rel="stylesheet">
<script type="text/javascript" language="javascript">
    //当窗体加载完毕的时候 触发该匿名函数
    //$(document)//把dom对象转换成jquery对象
 //$(document).ready(function (){});
   $(function (){
    $("#tabs").tabs({
     event:"mouseover",//event面板激活的实践效果处理 默认为click
     //disabled:[1], //面板否可用 小标从0 开始  [1,2]
     fx:{
      opacity:'toggle' //0.2 透明度 从无到有的一个动画的效果
   
      },
   selected:1 //默认选中的 从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">新闻:齐天大圣</div>
     <div id="tab-2">新闻:齐天大圣 悟空</div>
     <div id="tab-3">新闻:齐天大圣 哈哈!!!</div>
   </div>
</body>
</html>
效果图:

Android三种实现Tab界面效果的方法,ViewPager + Fragment

转载:http://blog.csdn.net/liweijie_chengxuyuan/article/details/45410617 向原作者致敬。 首先,第一种: ...
  • qice675563721
  • qice675563721
  • 2016年02月22日 11:12
  • 672

jquery插件ui中tabs实现选择面板效果

选项卡table $(function(){ $("#tabs").tabs({ //disabled:[1],//定义不可用元素 selected:2 }); $("#...
  • xi_weina
  • xi_weina
  • 2012年03月28日 16:49
  • 1012

jquery插件实现面板切换效果

无标题文档 $(function(){     $("#tables").tabs({         fx:{opacity:0.2}, //显示透明度的        ...
  • AFei_student
  • AFei_student
  • 2012年03月28日 19:36
  • 869

Jquery插件--实现面板模拟效果

无标题文档 //当窗体加载完毕的时候 触发该匿名函数 //$(document) //把dom对象转换成jquery对象 //.ready(funct...
  • zhaoxinglei0309
  • zhaoxinglei0309
  • 2012年03月28日 17:29
  • 317

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

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

jquery插件面板效果

这个效果在今天的讲课中给我印象最深的就是要在服务器下施行,在IE下可以,在火狐下就不可以。   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
  • w19911111
  • w19911111
  • 2012年03月28日 16:56
  • 264

easyui动态创建tab面板

easyui动态创建tab面板
  • hws1058648831a
  • hws1058648831a
  • 2014年01月26日 13:28
  • 1799

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

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

jQuery EasyUI 教程-Tabs(选项卡)

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

QQ面板的拖动效果【js】

function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, ...
  • lin14543
  • lin14543
  • 2016年08月17日 09:10
  • 186
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件--实现tabs面板效果
举报原因:
原因补充:

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