初步打算vs开发(因为效率高),WebStorm重构,学习方便。
bootstrap暂时木有提示新增标签页的操作,思路是用js取得元素,并且赋值,只省略了bootstrap的css和js(可以从网上下载到)。
参考自
这里:
一.html
<html> <head> <meta charset="utf-8"> </head> <body> <ul class="nav nav-tabs" id="deviceulid"> <li id="addli" role="presentation" onclick="AddItem()"> <a href="#qr">add new</a> </li> </ul> <div id="contentdiv"> click tabs to change the content. </div> </body> </html>
二.js
var count = 1; var ul = document.getElementById ("deviceulid"); var afterli = document.getElementById ("addli"); var textdiv = document.getElementById ("contentdiv"); function AddItem() { if ( count == 5) { afterli .onclick = function() { alert ("no more than 5"); void ( 0); }; } var l1 = document.createElement ("li"); var href_a = document.createElement ("a"); href_a .innerHTML = "the " + (count ++).toString() + " tab" ; href_a .onclick = function () {textdiv.innerHTML = this .innerHTML;}; l1 .setAttribute( "role" , "presentation" ); href_a .setAttribute( "data-toggle" , "tab" ); l1 .appendChild( href_a); ul .appendChild( l1);//the key method can be ended here. //change the sort var parul = afterli.parentNode ; parul .insertBefore( l1, afterli ); //toggle the state. var d = Number(document .getElementsByTagName("li" ).length); for ( var i = 0; i < d - 1 ; i++) { var activeli = document.getElementsByTagName ("li")[i ]; if ( i == d - 2 ) { activeli .setAttribute( "class" , "active" ); } else { activeli .removeAttribute("class" ); } } }