jQuery UI所支持的选项卡工具集
jQuery UI插件的选项卡也是一种由一系列容器所组成的工具集，这些容器在同一时刻只有一个被打开。每个内容容器由标题和内容构成，当单击内容容器标题时，就可以访问该容器的包含的内容，每一个标题都作为独立的选项卡出现。对于每一个容器来说，都有与之相关联的选项卡。
在页面中使用jQuery UI插件的选项卡工具集，需要经过以下步骤：
在页面的head标签元素中添加选项卡工具集所支持的类库、样式表等资源，具体代码：
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/jquery-ui.js" ></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
通过tabs（）方法进行封装DOM对象为jQuery对象，该方法的的具体语法：
$(selector).tabs();
其中，selector是选择器，用于选择将封装成选项卡工具集对象的容器。
实现经典的选项卡功能通过应用jQuery UI插件中的（Tab）组件
初始效果：
初始HTML:
<body> <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1"> perfect_01</a></li> <li><a href="#tabs-2"> perfect_02</a></li> <li><a href="#tabs-3"> perfect_03</a></li> </ul> <div class="tabs-spacer"></div> <!--设置选项卡的内容--> <div id="tabs-1"> <p> perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> <div id="tabs-2"> <p> perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> <div id="tabs-3"> <p> perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> </div> </body>
引入插件后，并且进行编写jQuery代码：
效果：
jQuery代码：
<script> $(function(){ $("#tabs").tabs(); //移除和添加样式 $(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*") .removeClass("ui-corner ui-corner-top") .addClass("ui-corner-bottom"); //设置标题到下面 $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); $("#tabs").tabs({ event:"mouseover" }); }); </script>
通过tabs()方法将对象tabs封装成选项卡对象：
$("#tabs").tabs();
设置相关的样式：
//移除和添加样式
$(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*")
.removeClass("ui-corner ui-corner-top")
.addClass("ui-corner-bottom");
设置选项卡的标题在下面，同时通过选项event设置选项卡切换内容的事件为mouseover.
//设置标题到下面
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
$("#tabs").tabs({
event:"mouseover"
});
总的代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.js" ></script> <script type="text/javascript" src="js/jquery-ui.js" ></script> <link rel="stylesheet" href="css/jquery-ui.css" /> <script> $(function(){ $("#tabs").tabs(); //移除和添加样式 $(".tabs-bottom .ui-tabs-nav,.tabs-bottom .ui-tabs-nav >*") .removeClass("ui-corner ui-corner-top") .addClass("ui-corner-bottom"); //设置标题到下面 $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom"); $("#tabs").tabs({ event:"mouseover" }); }); </script> </head> <body> <div id="tabs" class="tabs-bottom"> <ul> <li><a href="#tabs-1"> perfect_01</a></li> <li><a href="#tabs-2"> perfect_02</a></li> <li><a href="#tabs-3"> perfect_03</a></li> </ul> <div class="tabs-spacer"></div> <!--设置选项卡的内容--> <div id="tabs-1"> <p> perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> <div id="tabs-2"> <p> perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_02 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> <div id="tabs-3"> <p> perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_03 perfect_01perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect_01 perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect perfect </p> </div> </div> </body> </html>