bootstrap:动态添加tab标签

一：动态添加tab标签：

bootstrap的tab标签是通过ul和li来实现的，是传统的jsp的tab标签不一样。

所以动态标签的实现，就是ul动态添加和删除li。

1，首先是bootstrap代码：

<ul class="nav nav-tabs" id="deviceulid">
  <li><a href="${ctx}/mongodb/device?id=${device.id}">基本信息</a></li>
  <shiro:hasPermission name="resources:device:edit">  //这是权限认证，可以去掉
  <li class="active"><a href="${ctx}/mongodb/device/contacts?conid=${device.id}">联系人</a></li>
  </shiro:hasPermission>
 </ul>

2，定位ul,创建新li与删除老li:

var ul = document.getElementById("deviceulid")//定位ul

var li= document.createElement("li"); //创建li
var href_a = document.createElement("a"); //创建li中的链接a
    href_a.href="javascript:void(0)"; //连接地址或执行函数
    href_a.innerHTML =""; //链接显示文本（相当于标签标题）
    //li.innerHTML=""; //标签页的标题
    li.id="d1"; //标签页ID

li.appendChild(href_a);//将a添加到li 
ul.appendChild(li); //将li添加到ul

所以我们只要依据动态的值，来动态变化相应（href_a.href，href_a.innerHTML）的值即可。

下面的红色代码，表示有且只有一个标签在变化

var oldli = document.getElementById("d1");

 if(oldli!=null){
    ul.removeChild(oldli); //只能添加一个tab,在一个tab上变化
    }

以上代码的结合能实现：

1——比如一个select的值的变化，出现一个新的标签页，标签页的标题就是select的选中值，页面的内容也不一样。

2——比如一个checkbox的选择，出现一个或多个新的标签，标签页的标题就是选中的checkbox的值，跳转的页面也不一样。