用jquery写的面板

来源：互联网发布：v380网络设置连接失败编辑：程序博客网时间：2024/05/16 16:03
<!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><link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" /><script type="text/javascript"> //当窗体加载完毕的时候 触发该匿名函数 //$(document) //把dom对象转换成jQuery对象 //$(document).ready(function(){})   $(function(){    $("#tabs").tabs({    //event:"mouseover",  event:"click",    //disabled:[1],//面板不可用 从0开始    fx:{    opacity:"toggle"//透明度 从无到有的一个动画效果    },  selected:1//默认选择中的面板    });    $("#tabs").tabs("remove",3);    $("#tabs").tabs("add","tab4.html","面板四");        });</script></head><body>  <h1>模拟tabs效果</h1>  <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="./tab4.html">面板四</a></li>        </ul>        <div id="tab-1">fffffff</div>        <div id="tab-2">eeeeeeee</div>        <div id="tab-3">wwwwwwww</div>  </div></body></html>