bootstrap-js新增tab

初步打算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>
View Code

二.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" );
        }
    }
}
View Code

 

posted on 2016-04-28 14:17  鸣动我心  阅读(519)  评论(0)  编辑  收藏  举报