jquery插件实现面板切换效果

原创 2012年03月28日 19:36:06
<!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.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
$(function(){
    $("#tables").tabs({
        fx:{opacity:0.2}, //显示透明度的
        selected:3
        });
    });
</script>
</head>

<body>
<div id="tables">
    <ul>
        <li><a href="#tab-1">陌生人</a></li>
        <li><a href="#tab-2">黑名单</a></li>
        <li><a href="#tab-3">白名单</a></li>
        <li><a href="#tab-4">找死啊</a></li>
    </ul>
    <div id="tab-1">
        嘿嘿 哈哈  (*^__^*) 嘻嘻……
    </div>
     <div id="tab-2">
        啦啦啦啦啦  我我我我我我我我
    </div>
     <div id="tab-3">
        佳佳。。。。。I love you forever!!!
    </div>
    <div id="tab-4">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
    </div>
    
</div>
</body>
</html>


html切换面板

切换面板 自动切换 手动切换
  • Super_Gods
  • Super_Gods
  • 2015年08月18日 11:22
  • 1186

学习笔记:axure 高级教程 1 动态面板制作tab切换效果

1. 实例截图分析     淘宝的登录框主要分为了2个页面标签,淘宝会员和支付宝会员,登录者在这2个不同的标签页进行切换选择自己的登录方式,并且未选中状态层呈突出显示。其他都是一些文本面板加文...
  • qq_16956581
  • qq_16956581
  • 2015年06月19日 22:56
  • 2882

Axure使用动态面板制作tab切换效果

最近在公司使用axure做原型设计,记录下学习进度和遇到的问题处理方法 今天写下使用动态面板制作tab切换效果 效果如下:切换栏目1,2,3分别显示不同的页面 步骤: 在页面添加导航栏...
  • happymatilian
  • happymatilian
  • 2016年03月21日 17:37
  • 4962

Axure的动态面板制作tab切换效果

最近进行机房合作画原型图的时候用到了Axure画图软件,画出来的图感觉棒棒哒!在画结账窗体的时候确实遇到了一些问题,因为有动态效果图,点击不同的Tab时要有不同的界面显示,所以学习了一下!...
  • tengliu6
  • tengliu6
  • 2016年05月08日 21:39
  • 1000

利用 hover 伪类创建纯 CSS 收缩面板

这是一个非常简单的例子,主要利用了元素 hover 高亮效果的特性创建收缩面板。“hover”的意思就是用户鼠标移上某个元素时,该元素会产生高亮的效果。所谓“高亮”,仅仅是我们想定义的这样子。具体是什...
  • zhangxin09
  • zhangxin09
  • 2013年12月29日 21:47
  • 4185

jquery 点击切换面板及图标

将背景颜色换成背景图 无标题文档 .finance{ border-bottom:none; } .finance dd{ line-height:48px; color:#0e4...
  • Zoe_Wang_ing
  • Zoe_Wang_ing
  • 2013年12月03日 13:04
  • 1622

[前端] html+css+javascript 实现选项卡切换效果

用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一些新闻门户网站上的常见选项卡效果:文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环...
  • u012848631
  • u012848631
  • 2016年03月28日 10:20
  • 15814

Axure RP 万能的标签切换面板-动态面板切换

切换面板在网页中算是非常常见的,如视频网站的电视剧分类标签、资讯网站的资讯分类等;这些交互效果都可以利用动态面板的几个状态来进行相互切换得来。下面来介绍一下如何制作这样的标签。 步骤1: 从部...
  • PEXUE
  • PEXUE
  • 2015年01月19日 14:00
  • 9678

上下面板切换效果(类似大黑板效果)

上篇blog介绍了ViewDragHelper的简单的使用,这篇blog再用ViewDragHelper来实现一个效果,先上图 再上代码:public class BlackboardView ...
  • qqoopp332211
  • qqoopp332211
  • 2016年02月13日 19:35
  • 206

Swing布局问题,多个Jpanel切换

我们在学习swing的时候,可能总会有这样一种需求,从一个面板到另一个面板,甚至到另一个面板,然后再从另一面板回到这个面板,说白了就是界面切换吧!下面说一下我的小demo,希望给大家带一个领头作用。个...
  • u011410529
  • u011410529
  • 2015年04月13日 09:35
  • 1772
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件实现面板切换效果
举报原因:
原因补充:

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