jquery面板效果插件

原创 2012年03月28日 17:51:42

<!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>
<!--引入jquery类库文件-->
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="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">

<script type="text/javascript" language="javascript">
  $(function(){
      $("#tabs").tabs({
    //面板激活的事件效果
     event:"click",
    //设置不可用的面板,下标从0开始
     disabled:[1],
    //设置默认选中的面板
    selected:2,
    //设置透明度,从无到有的一个动画效果
    fx:{
    opacity:'toggle'
     }  
    });
 //移除一个面板
  $("#tabs").tabs("remove",1);
 //添加一个面板
     $("#tabs").tabs("add","tab-4.html","面板5");
 
 });
</script>
</head>

<body>
  <div id="tabs">
   <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.html">面板4</a></li>
   </ul>
    <div id="tab-1">这里是面板一</div>
    <div id="tab-2">这里是面板二</div>
    <div id="tab-3">这里是面板三</div>
  </div>
</body>
</html>

 

tab-4.html中内容:

<!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>
</head>

<body>
 <p>我怎么跑到这里了呢?</p>
</body>
</html>


 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery插件面板效果

面板效果 $(document).ready(function (){ $("#tabs").tabs({ event:"clic...

jquery 控制面板插件的基本操作

$(function(){ // var option={header:"h3"}; //[{},{}] json格式 $("#accordion").accordion({ ...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

【jQuery】使用JQ来编写面板的淡入淡出效果

本文与上一篇的《【jQuery】使用JQ来编写最基本的淡入淡出效果》(点击打开链接)为姊妹篇, 但上一篇只是对文本的基本控制,本篇则是对面板元素进行控制。 虽然功能上非常类似,但是所用到的控制函数是...

jquery面板效果

tabs.html 无标题文档 //$(document) 把dom对象转换成jQuery对象 //.ready(function(){}); ...
  • byn10
  • byn10
  • 2012-03-28 19:59
  • 1669

基于jquery fly插件实现加入购物车抛物线动画效果

jquery fly插件实现加入购物车抛物线动画效果

jquery插件弹出窗口爆炸效果!

tabs效果 //当窗体加载完毕的时候 触发该匿名函数 //$(document) //把dom对象转换成jquery对象--- //$(document).ready(fun...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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