jQuery插件应用之 --- 选项卡插件的使用
一 首先来介绍一下选项卡插件的作用
jQuery UI插件折叠板可以实现页面中指定区域的折叠效果，这种效果称”手风琴”，即通过单击某个面板中的标题栏，就会展开相应的内容，当点击其他面板标题栏时，已展开的内容会自动关闭，通过这种方式，实现多个面板数据在一个页面中有序展示。
二 选项卡插件的使用
1． 首先来介绍一下折叠面板所用的参数
（1）collapsible是否可折叠选项卡的内容，设置一个布尔值，如果为true，那么允许用户可折叠选项卡的内容，即首次点击展开，再点击关闭，默认值为false。
（2）disable 设置不可用选项卡
（3）event 设置展开选项的事件，默认值为”click”，也可以设置双击，鼠标划过事件
（5）fx设置切换选项卡时的一些动画效果
（6）设置被选中选项卡的index
2.我们首先来创建一个html页面，如下：
<body> <div> <div> <h1>模仿面板的效果</h1> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">我是第一个选项卡 </div> <div id="tabs-2">我是第二个选项卡</div> <div id="tabs-3">N我是第三个选项卡</div> </div> </div> </div> </body> 3.通过编写js代码来实现功能，需要注意的是要引入文件 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css"> <script type="text/javascript"> 然后代码的使用 <script type="text/javascript"> //页面加载完毕触发匿名函数 $(document).ready(function(){ $('#tabs').tabs({ collapsible:true, selected:1,//默认展开的是第1个面板 下标从0开始的 event:"mouseover", //动画效果 fx:{ opacity:"toggle",//显示的动画效果 还有show 和fadeIn,toggle 也可以设置为opacity:0.2 0.2是透明度，透明度是0-1,1代表是完全不透明 height:"toggle" //高度本身展开的方式 }, disabled:[1,2], //1和2不可用的面板 }); //改变原有选项卡的内容 $('#tabs').tabs("url",2,"tab5.jsp"); //添加选项卡 $('#tabs').tabs("add","tab5.jsp","four"); //移除选项卡 $('#tabs').tabs("remove",1); }); </script> 在改变原有的选项卡的内容的时候需要在html中插入一条语句： <li><a href="${pageContext.request.contextPath}/tabs/tab4.jsp">4</a></li> 内部是通过ajax来实现的