Jquery-tools 的Tabs,如何通过JS添加新的标签卡?

hac2009 发布于 2012/03/15 10:58
阅读 2K+
收藏 2

根据jquery tools的tabs示例修改,希望通过脚本实现动态增加tab卡页的功能,但不知道如何把新增的标签卡绑定到插件中,请高手指教!

 我实现的脚本如下: 

<html>
<head>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.tools.min.js"></script>
<link rel="stylesheet" href="css/jquery_tabs.css"  />
<link rel="stylesheet" href="css/jquery_tab_panes.css"  />
<script type="text/javascript">
$(document).ready(function(){
    // 将ul.tabs区域设定为选项卡,用来控制div.panes区域中最近一层的各div区域
   // 注意tabs和panes与html中class的对应关系
    $(".tabs").tabs("div.panes > div",{history: true}); 
	$("#bt_add").click(function(){
		if($("#li_4").length==0){
			$(".tabs").append('<li id="li_4"><a href="#forth">选项卡4</a></li>');
			$(".panes").append('<div>第四个选项卡内容,<a href="#first">跳转至选项卡1</a></div> ');
		}
  });
});
</script>
</head>
<body>
<!-- 定义选项卡按钮,注意最外层的class定义为tabs --> 
<ul class="tabs"> 
    <li><a href="#first">选项卡1</a></li> 
    <li><a href="#second">选项卡2</a></li> 
    <li><a href="#third">选项卡3</a></li> 
</ul> 
<!-- 定义选项卡切换的每个区域,注意最外层的class定义为panes --> 
<div class="panes"> 
    <div>第一个选项卡内容,<a href="#second">跳转至选项卡2</a></div> 
    <div>第二个选项卡内容,<a href="#third">跳转至选项卡3</a></div> 
    <div>第三个选项卡内容,<a href="#first">跳转至选项卡1</a></div> 
</div>
<button id="bt_add"> 增加 </button>
</body>
</html>


加载中
0
开源无憾
开源无憾
同情楼主啊。。。。
返回顶部
顶部