jquery面板效果

来源：互联网发布：ubuntu查看编译器编辑：程序博客网时间：2024/06/05 06:25
tabs.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><script language="javascript" type="text/javascript" src="../include/jquery.js"></script><script language="javascript" type="text/javascript" src="../include/jquery-ui-1.8.18.custom.min.js"></script><link rel="stylesheet" href="../include/jquery-ui.css" /><script type="text/javascript">       //$(document)  把dom对象转换成jQuery对象   //.ready(function(){});      //当窗体加载完毕的时候 触发该匿名函数   $(function(){   $("#tabs").tabs({      //根据id选择器获取当前的id选择器的jQuery对象      event:"mouseover",  //面板展开的事件效果，默认是click效果   //disabled:[1],      //面板不可用 1代表第二个面板不可用 [1,2]   fx:{opacity:'toggle'},  //opacity:'toggle' 透明度 从无到有的一个动画的效果      selected:1,        });     //移除一个面板    $("#tabs").tabs("remove",2);   //添加一个面板    $("#tabs").tabs("add","tab4.html",'four');   });</script></head><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>           <li><a href="./tab.html">面板4</a></li>       </ul>              <div id="tab-1">           新闻：1齐天大圣 大闹天空！       </div>              <div id="tab-2">           新闻：2齐天大圣 大闹天空！       </div>              <div id="tab-3">                  新闻：3齐天大圣 大闹天空！       </div>   </div></body></html>tab.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>