jquery插件面板效果

来源：互联网发布：logback 配置输出sql 编辑：程序博客网时间：2024/06/01 01:34
<!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><link rel="stylesheet" href="../include/ui-lightness/jquery-ui-1.8.18.custom.css" /><script type="text/javascript" src="../include/jquery-1.7.1.min.js"></script><script type="text/javascript" src="../include/jquery-ui-1.8.18.custom.min.js"></script><script type="text/javascript">  $(document).ready(function (){    $("#tabs").tabs({    event:"click",  disabled:[1],  fx:{  opacity:'toggle'  //opacity:0 透明度为0不显示内容了  },  selected:2  //默认选中第三个       });   $("#tabs").tabs("remove",2); //把第三个面板删除了     $("#tabs").tabs("add","#new","新面板");   });</script></head><body>   <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>        <li><a href="#tab-4">面板4</a></li>           </ul>       <div id="tab-1">        这是面板1的内容     </div>          <div id="tab-2">        这是面板2的内容     </div>          <div id="tab-3">        这是面板3的内容     </div>           <div id="tab-4">        这是面板4的内容     </div>               <div id="new">        这是新添加的面板     </div>   </div></body></html>