<ul class="sub">
  <li><span id="Organization" Url_index="/SystemManagement/SystemXX/ZZJG">組織結(jié)構(gòu)</span></li>
  <li><span id="Department" Url_index="/SystemManagement/SystemXX/BuMenGuanLi">部門(mén)管理</span></li>
  <li><span id="Employee" Url_index="/SystemManagement/SystemXX/YuanGongGuanLi">員工管理</span></li>
  <li><span id="User" Url_index="/SystemManagement/SystemXX/YongHuiGuanLi">用戶(hù)管理</span></li>
</ul>

<div class="layui-tab" lay-filter="Tab_LiShiJiLu" lay-allowClose="true" style="background:#fff;">
  <ul class="layui-tab-title" id="deleteSpan" style="margin:0px 40px 0px 40px;left:0px">
    <li class="layui-this" lay-id="HomePage" id="positionLeft">
     <img src="~/Content/img/3Dpng/png-0060.png" style="width:20px;height:20px;margin-bottom:5px;" />
     <i class="layui-icon layui-unselect layui-tab-close" style="display:none;" οnclick="delTab()">ဆ</i>
    </li>
  </ul>
  <div class="layui-tab-content" id="tab_Size" style="padding:0px;">
    <div class="layui-tab-item layui-show">
     <iframe id="content" scrolling="auto" style="height:630px;" src="/Main/HomePage"></iframe>
    </div>
  </div>
</div>

var LiShiLiuLanJiLus = new Array();//保存歷史瀏覽記錄
var element;
$(function () {
 //===注意：選項(xiàng)卡 依賴(lài) element 模塊，否則無(wú)法進(jìn)行功能性操作
 layui.use(['element'], function () {
   element = layui.element;
 
   //監(jiān)聽(tīng)選項(xiàng)卡的切換事件
   element.on('tab(Tab_LiShiJiLu)', function (data) {
    //獲取lay-id
    var lay_id = $(this).attr("lay-id");
    //為側(cè)邊導(dǎo)航添加樣式
    if ($("ul.sub li span").hasClass("clickStyle")) {
     $("ul.sub li span.clickStyle").removeClass("clickStyle");
     $("#" + lay_id).addClass("clickStyle");
    }
   });
 
 });
 
 //===為側(cè)邊導(dǎo)航添加點(diǎn)擊樣式&&添加選項(xiàng)卡
 $("ul.sub li span").click(function () {
   //選中側(cè)邊導(dǎo)航，為其添加樣式
   if ($("ul.sub li span").hasClass("clickStyle")) {
    $("ul.sub li span.clickStyle").removeClass("clickStyle");//清除上一個(gè)的樣式
   }
   $(this).addClass("clickStyle");//為當(dāng)前的span加上樣式
 
   //獲取相應(yīng)的內(nèi)容
   var thisOnclickTxt = $(this).text();//獲取標(biāo)題（用于選項(xiàng)卡的標(biāo)題）
   var thisOnclickId = $(this).prop("id");//獲取標(biāo)簽id值（用于選項(xiàng)卡的lay-id值）
   var thisOnclickUrl = $(this).attr("Url_index");//獲取跳轉(zhuǎn)到路徑
   //跳過(guò)該頁(yè)面
   if (thisOnclickTxt == "鎖屏休息") {
    return;
   }
   if (thisOnclickTxt == "注銷(xiāo)登陸") {
    return;
   }
 
   //判斷是否要添加選項(xiàng)卡
   var state = true;//聲明一個(gè)狀態(tài)
   //循環(huán)數(shù)組內(nèi)容
   for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
    //判斷判斷該選中內(nèi)容是否存在數(shù)組內(nèi)
    if (thisOnclickId == LiShiLiuLanJiLus[i]) {
     //存在，把狀態(tài)值改為false
     state = false;
    }
   }
 
   if (state == true) {
    LiShiLiuLanJiLus.push(thisOnclickId);//向數(shù)組后面插入內(nèi)容
    //添加選項(xiàng)
    element.tabAdd('Tab_LiShiJiLu', {//Tab_LiShiJiLu為lay-filter=""相對(duì)應(yīng)的值
      title: thisOnclickTxt + '<i class="layui-icon layui-unselect layui-tab-close" οnclick="delTab()">ဆ</i>',//標(biāo)題
      content: '<iframe id="content" scrolling="auto" style="height:630px;" src="' + thisOnclickUrl + '"></iframe>', //傳如子頁(yè)面
      id: thisOnclickId,//lay-id
     });
 
    }
 
    //切換選項(xiàng)卡
    element.tabChange('Tab_LiShiJiLu', thisOnclickId);
 
 });
});
 
 //刪除選項(xiàng)卡
 function delTab() {
   $(".layui-tab").on("click", function (e) {
    if ($(e.target).is(".layui-tab-close")) {
     var deltab = $(e.target).parent().attr("lay-id");//輸出哪個(gè)tab被點(diǎn)擊，沒(méi)有值時(shí)返回undefined
     element.tabDelete('Tab_LiShiJiLu', deltab); //刪除 lay-id="xxx" 的這一項(xiàng)
 
     //循環(huán)數(shù)組內(nèi)容
     for (var i = 0; i < LiShiLiuLanJiLus.length; i++) {
      if (deltab == LiShiLiuLanJiLus[i]) {
       LiShiLiuLanJiLus.splice(i, 1);//刪除數(shù)組的一個(gè)元素，i為當(dāng)前元素在數(shù)組內(nèi)的位置
      }
     }
    }
   });
 }