Jquery-ui-bootstrap Add and Remove tabs dynamically "effects are more dazzling"

1.

2. Import JS and CSS

<link rel= "stylesheet" href= "Css/bootstrap/css/bootstrap.min.css" ><link rel= "stylesheet" type= "Text/css" href= "Font/font-awesome/css/font-awesome.css" ><link rel= "stylesheet" type= "Text/css" href= "css/ Jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.0.custom.css "/><link rel=" stylesheet "type=" Text/css " href= "Css/default.css" >
Default.css is a tabs effect drawing
/*jquery-ui-bootstrap Tabs*/.tabs ul {/* border-bottom:3px solid #39aef5!important;*/}.tabs ul li:not (: first-child) { Padding-right:15px!important; }.tabs ul li{border-top:1px solid #ccc!important;border-left:1px solid #ccc!important;/*border-bottom:1px Solid # 39aef5!important;*/}.tabs ul Li A{color: #666!important;}. Tabs ul li Span:hover{color: #C61010!important;}. Tabs ul Li A:hover,.tabs ul li:hover,.tabs ul li:focus{border-bottom:0!important;}. Tabs ul li:last-child{border-right:1px solid #ccc!important;}. Tabs ul li.ui-state-active.ui-tabs-active A,.tabs ul Li.ui-state-active.ui-tabs-active Span,.tabs ul LI.UI-STATE-ACTIVE.UI-TABS-ACTIVE{/*BORDER-TOP:3PX solid red!important;*/background: #39aef5!important; border-bottom:2px solid #39aef5!important;color: #ddd!important;}. Tabs ul li.ui-state-active.ui-tabs-active a:hover,.tabs ul li.ui-state-active.ui-tabs-active span:hover{color: #fff! important;}. Tabs ul Li fa-times-circle{position:absolute;top:10px;right:18px;}
 Default.js 
 
$ (function () {var tabs = $ ("#tabs3"). tabs (); var tabtemplate = "<li><a href= ' #{href} ' >#{label}</a> <span class= ' fa fa-times-circle ' ></                        Span></li> "; $ ('. Menu Li '). Click (function () {//Get tabs under A[href] the value var id=" #tabs-"+this.id; Tabs is initialized with an Li, so to subtract 1, when added, index will return-1, and then minus 1 to 2, depending on the actual situation.                         This is actually where the #id is located by ID, and then the active var index=$ ("#tabs3") is set. Find (ID). Index ()-1;                          $ ("#tabs3"). Tabs (' option ', ' active ', index);                          if (index==-2) {addTab (this.innertext,this.id); }}); function AddTab (tabtitle,id) {var label = tabtitle, id = "tabs-" + ID, Li = $ (tabte           Mplate.replace (/#\{href\}/g, "#" + ID). replace (/#\{label\}/g, label));            var tabcontenthtml = $ ("#" +id). html ();            var existing=tabs.find ("[id= '" "+id+"] ");          if (existing.length==0) {   Tabs.find (". Ui-tabs-nav"). Append (LI);        Tabs.append ("<div id=" + ID + "' ><p>" + tabcontenthtml + "</p></div>");            Tabs.tabs ("Refresh");                          } var index=tabs.find ('. Ui-tabs-nav li '). index (existing);          Always returns when added-1 tabs.tabs (' option ', ' active ', index); }//Close icon:removing the tab on click $ ("#tabs3"). On ("Click", ' Span.fa-times-circle ', function () {var pan        ElId = $ (this). Closest ("Li"). Remove (). attr ("Aria-controls");        $ ("#" + panelid). Remove ();    Tabs.tabs ("Refresh"); });})
3. HTML Fragment
　　
Jquery-ui-bootstrap Add and Remove tabs dynamically "effects are more dazzling"