基于Bootstrap和JQuery实现动态打开和关闭tab页

 

by:授客 QQ：1033553122

1. 1.   测试环境

JQuery-3.2.1.min.j

 

Bootstrap-3.3.7-dist

 

win7

 

1. 2.   实践

 

HTML代码片段

<div class="container-fluid">

<div class="row">

<!--添加左侧菜单栏 -->

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">

<div class="pannel-group" id="accordion">

<div id="left-nav" class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title"><a data-toggle="collapse" class="nav-header collapsed" data-parent="#accordion" href="#tag20"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理<span class="pull-right glyphiconglyphicon-chevron-toggle"></span></a></h4>

</div>

<div id="tag20" class="panel-collapse collapse in">

<div class="panel-body">

<ulclass="navnav-list">

<li class="active"><a href="#" onclick="addTab({'menuID':'21', 'father':'navtab', 'tabName':'项目管理1', 'tabContentID':'tabContent', 'tabUrl':'/testulr'})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理1</a></li>

<li class="active"><a href="#" onclick="addTab({'menuID':'22', 'father':'navtab', 'tabName':'项目管理2', 'tabContentID':'tabContent', 'tabUrl':''})"><iclass="glyphiconglyphicon-cog"></i>&nbsp;&nbsp;项目管理2</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

<!--添加tab页面 -->

<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

<ulid="navtab" class="navnav-tabs">

<!--通过js获取 tab-->

</ul>

<!-- tab页面的内容 -->

<div id="tabContent" class="tab-content">

<!--通过js获取 tab对应的页面内容-->

</div>

</div>

</div>

</div>

 

</body>

</html>

 

 

JS代码片段

/**

 * 增加tab标签页

 * @param options：

 * menuIDtab标签页对应的左侧导航菜单在数据库表中的id，作为tab元素id的组成部分

 * tabName       tab标签页名称

 * tabUrl        tab“装载”的url

 * tabContentID  tab标签页的页面内容所在的父级元素（div容器）

 *

 * @returns {boolean}

 */

function addTab(options) {

setBreadcrumb(options.level1, options.level2, options.tabName);

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

varisExists= isTabExists(options.menuID);

if(isExists){ // 如果tab标签页已打开，则选中、激活

$("#tab-a-" + options.menuID).click(); // 注意，必须是点击 a标签才起作用

} else {

// 新增 tab 标签页

        //按钮图标 '<i class="glyphiconglyphicon-remove"></i></a>'

$("#" + tabFatherElementID).append(

'<li role="presentation" id="tab-li-' + options.menuID + '">' +

'    <a href="#tab-content-' +options.me