1.indix.html页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Java_Study</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <!-- linux中自定义类的样式 --> <link rel="stylesheet" type="text/css" href="css/index.css"/> <!-- 修改bootstrap 的css --> <link rel="stylesheet" type="text/css" href="css/bootstrap-self.css"/> <!-- 修改tab样式 --> <link rel="stylesheet" type="text/css" href="./css/main-tab.css"/> <!-- 动态生成、删除tab --> <script src="js/right-tab.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container-fluid container-other"> <!-- logo --> <div class="row row-up"> <div class="col-md-12 logo-color"> <span class="glyphicon glyphicon-object-align-vertical"></span> <span>xuexi-logo</span><br> </div> </div> <!-- 下部分 --> <div class="row row-dowm"> <!-- menu菜单 --> <div class="col-md-2 left-layout"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" > <!-- Java基础 --> <!-- <a>的 href aria-controls 及 div id 要统一 javaBaseCollapse --> <!-- div 中 id="java-base" 及 div 的 aria-labelledby="java-base"--> <div class="panel panel-default" style="background-color: #337ab7;border: 0px;"> <div class="panel-heading" role="tab" id="java-base"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#javaBaseCollapse" aria-expanded="true" aria-controls="javaBaseCollapse"> <button type="button" class="btn btn-primary"> Java基础 </button> </a> </div> <div id="javaBaseCollapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="java-base"> <div class="panel-body"> <button type="button" id="meiyongdeid" class="btn btn-primary" onclick="addTabMenu('myButton','基本变量','url')"> 基本变量 </button> </div> </div> </div> <!-- WEB前端 --> <div class="panel panel-default" style="padding-top: 0px;margin: 0px;"> <div class="panel-heading" role="tab" id="web-front"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#webCollapse" aria-expanded="false" aria-controls="webCollapse"> WEB前端 </a> </h4> </div> <div id="webCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="web-front"> <div class="panel-body"> div2 </div> </div> </div> <!-- 数据库 --> <div class="panel panel-default" style="padding-top: 0px;margin: 0px;"> <div class="panel-heading" role="tab" id="database"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#databaseCollapse" aria-expanded="false" aria-controls="databaseCollapse"> 数据库 </a> </h4> </div> <div id="databaseCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="database"> <div class="panel-body"> div3 </div> </div> </div> <!-- javaWeb --> <div class="panel panel-default" style="padding-top: 0px;margin: 0px;"> <div class="panel-heading" role="tab" id="javaWeb"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#javaWebCollapse" aria-expanded="false" aria-controls="javaWebCollapse"> JavaWeb </a> </h4> </div> <div id="javaWebCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="javaWeb"> <div class="panel-body"> div4 </div> </div> </div> <!-- 框架及组件 --> <div class="panel panel-default" style="padding-top: 0px;margin: 0px;"> <div class="panel-heading" role="tab" id="frameworkAndComponents"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#componentsCollapse" aria-expanded="false" aria-controls="componentsCollapse"> 框架及组件 </a> </h4> </div> <div id="componentsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="frameworkAndComponents"> <div class="panel-body"> div5 </div> </div> </div> </div> </div> <!-- 显示页面 main --> <div class="col-md-10 right-layout"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist" id="main-tabs-ul"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">首页</a></li> </ul> <!-- Tab panes --> <div class="tab-content" id="main-tabs-div"> <div role="tabpanel" class="tab-pane active" id="home">首页...</div> </div> </div> </div> </div> </body> </html>
2.已用的js ：right-tab.js
function addTabMenu (menuID,menuName,menuURL) { //判断是否已存在指定ID的tab if ($("#" + menuID).length > 0) { throw "当前ID的Tab已存在．"; } var mainTabsUl = document.getElementById("main-tabs-ul"); var mainTabsDiv = document.getElementById("main-tabs-div"); var tabUl_li = document.createElement('li'); tabUl_li.innerHTML='<a href="#'+ menuID +'" aria-controls="'+ menuID +'" role="tab" data-toggle="tab">'+menuName+'</a> ' + '<button id="btn-'+menuID+'" class="close closeTab set-tab-x" type="button" onclick="closeTab(this);">×</button>'; tabUl_li.role="presentation"; var tabDiv = document.createElement('div') tabDiv.innerHTML="<div>"+ menuURL +"</div>"; tabDiv.setAttribute("role", "tabpanel"); tabDiv.className="tab-pane in active"; tabDiv.id=menuID; mainTabsUl.appendChild(tabUl_li); mainTabsDiv.appendChild(tabDiv); $(tabUl_li).tab("show"); $(tabDiv).siblings().removeClass("active"); }; /** /** * 关闭标签页 * @param button */ function closeTab (button) { //得到所有 tab 显示的 div 的数组 var $tabs = $('#main-tabs-div').children( 'div' ); var i=0; // 用来存储将要删除的tab 的显示 div 的id delID = button.id.substring(4); $tabs.each( function() { var $tab = $( this ); // 判断是否是当前要删除的 tab ,如果是,设置上一个tab 为active if($tab.hasClass('active')){ if('btn-'+$tabs[i].id == button.id){ delID = $tabs[i].id; $tabs[i-1].className="tab-pane in active"; } } i++; } ); //关闭TAB //删除 li $(button).parent().remove(); // 将要删除的tab 的显示 div $( "#"+delID).remove(); };
3.自定义使用的css
①bootstrap-self.css：
.panel{ padding: 0px; margin: 0px; } .panel-default{ padding: 0px; margin: 0px; } .panel-group { margin-bottom: 20px; width: 215px; margin-left: -20px; text-align: center; }
②index.css
.container-other{ position: absolute; width: 100%; height: 100%; background: yellow; } .logo-color{ background-color: black; height: 100%; line-height: 30px; //text-align: center; color: aqua; } .row-up{ height: 6%; } .row-dowm{ height: 94%; } .left-layout{ display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: rgb(48, 65, 86); border-right: 1px solid #eee; height: 100%; } .right-layout{ display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #eeeeee; border-right: 1px solid #eee; height: 100%; }
③main-tab.css
.set-tab{ padding: 10px; margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; } .set-tab-x{ position: relative; left: -5px; top: -42px; } #main-tabs-ul{ height: 42px; } #main-tabs-div{ position: fixed; padding: 10px; }