1. 描述
使用者希望可以自定義設定tab的展現與隱藏，比如不同使用者可以檢視不同的tab塊，或者隱藏一些無關tab頁的內容
，該如何實現呢？
2. 思路
通過js隱藏tab標題。
注：通過js的方法，可能導致tab內部元件不能根據正確的寬高進行自適應，因此建議通過設計器自帶屬性——設定
tabpane
高度為0
的方法，來實現隱藏。詳情請參考：tab
布局第3.6章。
注：此功能不支援移動端和h5方式預覽。
3. 操作步驟
3.1
示例一（隱藏整個tab標題） 1
）開啟模板
開啟模板
生產庫存分析.frm 2
）新增初始化事件
在決策報表右上角
控制項設定
中，選擇
tabpane0
控制項，新增
初始化事件
，如下所示：
jar包在2018-1-24
之前，所要新增的js如下：
'div:lt(1)'
,this
.element.parent()).hide();
//隱藏tab標題
而jar包為
2018-1-24
及之後，隱藏tab標題的js**如下：
.element.parent().hide();
注：是新增到tabpane塊元件的初始化事件，不是tab塊裡面的每個tab頁籤的初始化事件。 3
）效果預覽
儲存模板，預覽效果如下：
3.2示例二（隱藏部分tab標題）
1）新增初始化事件
以上面的模板為例，修改初始化事件，如下所示：
js**如下：
.options.form.getwidgetbyname(
"tabpane0"
).settabvisible(
"tab1"
, false); 注：
要盡量避免重命的情況！若存在重名的tab，頁面初始化的時候，後載入的tab會覆蓋先載入的tab，所以js裡獲取到的，可能並不是預期要處理的tab。比如：模板裡有兩個tabpane0和tabpane1，頁面載入的時候tabpane1是後載入的，那麼你通過
this.options.form.getwidgetbyname("tabpane0").settabvisible("tab2", false);
獲取到的tab2，其實最後會是tabpane1裡的tab2，前面即使寫獲取的控制項名為tabpane0也是無效的。
另外，用傳統的寫法是不支援tab隱藏的，比如：
this.options.form.getwidgetbyname("tab0").setvisible();
，這種傳統寫法只適合用於控制項，比如report0這種報表塊元件的隱藏與否。
注：當模板匯出時，被隱藏的tab不會被匯出！ 2
）效果預覽
儲存模板，預覽效果如下：
4. 預覽效果
4.1 pc
端預覽效果
示例一：
示例二：
移動端預覽效果
注：不支援移動端。
5. 已完成模板 1
）示例一
實現隱藏tab
塊標題-
示例一.frm
右擊儲存模板 2
）示例二
實現隱藏tab
塊標題-
示例二.frm
右擊儲存模板
Vue實現tab標題切換例項
方法 一 html部分布局 html部分 如下所示 標題二標題三 標題四 內容一 內容二內容三 內容四給選中部分加css樣式 css部分 如下所示 li.hx activity引入vue.js實現效果 js部分 如下所示 new vue 方法 二 menulist for item,index in...
原生js實現tab切換
lang en charset utf 8 tab切換title box head list input active style head id box id head list button value 選單一 class active type button value 選單二 type bu...
js實現tab切換功能
一 初始化html結構 class tab id tab class active 工作日 休息日div class tabdiv class tabpane 11111111111 div class tabpane 22222222 div div 二 js var span document....