bootstrap nav-tabs添加关闭按钮，并实现点击关闭按钮实现tabs和页面的清除

<div>

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" id="contentnavid">

<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>

<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>

<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>

<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>

<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>

</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>

<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>

<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>

<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>

</div>

</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

/**

* 增加标签页

*/

function addTab(options) {

//option:

//tabMainName:tab标签页所在的容器

//tabName:当前tab的名称

//tabTitle:当前tab的标题

//tabUrl:当前tab所指向的URL地址

var exists = checkTabIsExists(options.tabMainName, options.tabName)

if(exists){

$("#tab_a_"+options.tabName).click()

} else {

$("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

//固定TAB中IFRAME高度

mainHeight = $(document.body).height() - 5

var content = ''

if(options.content){

content = option.content

} else {

content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

}

$("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

$("#tab_a_"+options.tabName).click()

}

}

/**

* 关闭标签页

* @param button

*/

function closeTab (button) {

//通过该button找到对应li标签的id

var li_id = $(button).parent().parent().attr('id')

var id = li_id.replace("tab_li_","")

//如果关闭的是当前激活的TAB，激活他的前一个TAB

if ($("li.active").attr('id') == li_id) {

$("li.active").prev().find("a").click()

}

//关闭TAB

$("#" + li_id).remove()

$("#tab_content_" + id).remove()

}

/**

* 判断是否存在指定的标签页

* @param tabMainName

* @param tabName

* @returns {Boolean}

*/

function checkTabIsExists(tabMainName, tabName){

var tab = $("#"+tabMainName+" >#tab_li_"+tabName)

//console.log(tab.length)

return tab.length >0

}