代码内容很多都是从amazeui直接copy过来的，先声明，请不要说在下抄袭- -
<!-------------------- HTML代码 ---------------------->
<div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="topbar">
<!--data-am-tabs 禁止触控-->
<ul class="am-nav am-tabs-nav am-nav-tabs" id="my-tabs">
<!--.am-nav-tabs --- 标签式导航-->
<li class="am-active"><a href="javascript: void(0)">流浪</a></li> <!--javascript:void(0)表示不做任何实际链接-->
<li><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">再流浪</a></li>
</ul>
<!--------------- 这里nav和tabs-bd好像可以自动一一对应 ---------------------->
<div class="am-tabs-bd">
<div class="am-tab-panel am-active">
...
</div>
<div class="am-tab-panel">
...
</div>
<div class="am-tab-panel">
...
</div>
</div>
</div>
今天看了一下jQuery部分关于选项卡的设置，学到了一些关于控件的增删操作，在此稍微笔记一下。
var $bd = $('#topbar').find('.am-tabs-bd'); /*这里可以注意到find的用法*/
这行代码是找到ID为‘topbar’的子元素中含有类名为'.am-tabs-bd'的控件，并且获得其id。
var newTabs = '<li><span class="am-icon-close"></span>' +
'<a href="javascript: void(0)">标签 ' + tabcounter + '</a></li>';
这段代码是定义一个li标签，选项卡中的一个选项。注意其中‘+’号的用法，将字符串拼接在一起。
$mytabs.append(newTabs);
在后代中直接插入newTabs，注意newTabs已经是一个控件
$mytabs.on('click','.am-icon-close', function(){
var $item = $(this).closest('li'); //找到离这个叉号最近(第一个能匹配的)的li标签（祖先元素），并且获得其id
var index = $mytabs.children('li').index($item); // 找到该li标签对应的下标
$item.remove();
$bd.find('.am-tab-panel').eq(index).remove(); //删除标签相应的内容
$mytabs.tabs('open',index-1); // 定位到删除的标签的前一个标签
$mytabs.tabs('refresh');
})
事件监听函数on()中，有一个'.am-icon-close'，表示当鼠标点击具有该类的控件时，触发function()中的操作
closet('.class')函数是寻找该控件的第一个符合class这个类的祖先元素。
$mytabs.children('li').index($item)中，children('object')寻找子元素中的object标签，并且把id为‘$item’的object标签的标号返回。
eq(index)是找到标号为index的标签，并且返回其ID。
（下面一段代码来自jQuery官网）
$( "#go" ).click(function() {
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
// now: 每一步动画下的属性值
$( ".block:gt(0)" ).css( "left", now );
}
});
});
这里的$(".block:first")是选择具有类"block"的第一个控件
$(".block:gt(0)")是选择具有类"block"的，标号大于0的控件，即除了第一个控件外。