用jquery实现选项卡效果(非常漂亮,带动画效果)

原创 2012年03月28日 18:54:31

<!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="./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>
<!--引进css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css">
</head>
<script language="javascript">
 //当窗体加载完毕的时候 触发该匿名函数
 //$(document) 把dom对象转换成jquery对象
 //
 $(document).ready(function (){
  $("#tabs").tabs({
   event:"mouseover",//event面板激活的事件效果处理 默认click
   //disabled:[1],//面板比可用 1代表的第二个面板不可用
   fx:{
    opacity:'toggle'//透明度 从无导游的一个动画效果
    },
   selected:1,//默认选中面板
   
   });//根据id选择器获取当前的id选择器的jquery对象
   //移除一个面板
  $("#tabs").tabs('remove',3);
   //添加一个面板
  $("#tabs").tabs("add","tab4.html","four");
  });
</script>
<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>

带CSS3过渡动画效果的jQuery Tabs选项卡插件

  • 2017年07月05日 11:41
  • 49KB
  • 下载

winform选项卡控件 切换动画效果 项目源码 含demo

  • 2015年08月01日 17:12
  • 965KB
  • 下载

iOS 动画的实现

与动画有关的框架: 实现动画,可以使用最上层的UIKit,这个框架中的UIView类有许多与动画有关的方法。UIView的动画实现是基于Core Animation的。在UIView不能满足需求...
  • ohyeahhhh
  • ohyeahhhh
  • 2016年07月07日 09:27
  • 322

jquery实现简单的选项卡功能

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

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

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

C#入门学习-----选项卡(更改显示样式、动态添加/删除、获得名称)

欢迎大家提出意见,一起讨论! 转载请标明是引用于 http://blog.csdn.net/chenyujing1234 需要源码请与我联系。   运行效果如下: 1、更改显选项卡的显示...
  • chenyujing1234
  • chenyujing1234
  • 2012年06月05日 16:59
  • 18703

TabLayout的自定义实现选项卡背景的滑动动画

最近看到App上一个不错的导航效果:一个导航滑动的效果,被选中的背景会有变化,会随着fragment的滑动有个位移动画。感觉挺有意思。两种方式:第一种: 使用TabLayout实现效果,第二种使用自...
  • u013233097
  • u013233097
  • 2016年09月09日 18:30
  • 4583

bootstrap选项卡效果

参赛项目信息 个人报名 队员列表--> 团体报名 ...
  • A9925
  • A9925
  • 2014年12月30日 17:24
  • 948

使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所...
  • qq_15096707
  • qq_15096707
  • 2016年01月29日 10:42
  • 2797

Navigation 动态加载选项,HorizontalScrollView横向选项卡

  • 2015年12月21日 17:28
  • 983KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用jquery实现选项卡效果(非常漂亮,带动画效果)
举报原因:
原因补充:

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