通过JS生成tab

最新推荐文章于 2024-03-04 00:09:38 发布

wq105032007067

最新推荐文章于 2024-03-04 00:09:38 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： html javascript

本文链接：https://blog.youkuaiyun.com/wq_tft/article/details/8582884

html 同时被 2 个专栏收录

11 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

本文介绍了一个用于生成网页中流程Tab标签的方法，通过简单的HTML结构和JavaScript脚本实现动态Tab效果，支持自定义显示顺序和触发事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/***************************************************
@DESC ：生成流程tab标签
@author : wuqing
@date : 2012-01-15
@remark :
    1、showTabIndex是首先显示的tab页，从0开始
    2、onSelectEvent是当前tab页选择后的触发事件
    3、tab1.hide()隐藏tab，JS可以直接调用
    4、tab1.show()显示tab，JS可以直接调用
5、html代码格式：（页面加载完成后调用该方法自动生成tab）
  <div class="flowPanel" showTabIndex="0">
   <div id="tab1" class="flowTab" tabTitle="tab页一" onSelectEvent="">
    <div>tab页一内容</div>
   </div>

   <div id="tab2" class="flowTab" tabTitle="tab页二" onSelectEvent="">
    <div>tab页二内容</div>
   </div>
  </div>

6、引入css

.selectTD {
    width:9%;
    font:14px/21px "宋体";
    text-align:center;
    font-weight:normal;
    color:#0653A2;
    white-space:nowrap;
    padding:0;
    border:1px solid #6BA5D7;
    border-top:2px solid #70ABF4;
    border-bottom:0px solid #70ABF4;
    border-collapse:collapse;
    border-spacing:0px;
    cursor:hand;
    font-weight:bold;
    background-color:#ECF0F2;
}

.defTD {
    width:9%;
    font:13px/20px "宋体";
    text-align:center;
    font-weight:normal;
    color:#0653A2;
    white-space:nowrap;
    padding:0;
    border:1px solid #6BA5D7;
    border-collapse:collapse;
    border-spacing:0px;
    background-color:#D5EAFC;
    cursor:hand;
}

.dbTitleBl {border-bottom:1px solid #6BA5D7;}
****************************************************/
function initFlowTab(){
var flowPanelArr = $(".flowPanel");
for(var i=0; i<flowPanelArr.length; i++){
  var innerHtml = "";
  innerHtml = '<table style="margin:0;padding:0;margin-top:15px;margin-bottom:8px;" width="100%" height="25px" align="center" border="0" cellspacing="0" cellpadding="0">';
     innerHtml += ' <tr>';
  var flowPanelObj = flowPanelArr[i];
  var flowTabArr = flowPanelObj.children;
  if(flowTabArr.length == 0){
   continue;
  }
  var showTabIndex = flowPanelObj.showTab;
  if(showTabIndex == undefined || showTabIndex == ''){
   showTabIndex = 0;
  }
  innerHtml += ' <td style="width:20px;" class="dbTitleBl"> </td>';
  for(var j=0; j<flowTabArr.length; j++){
   var className = "defTD";
   flowTabArr[j].style.display = 'none';
   if(showTabIndex == j){
    className = "selectTD";
    flowTabArr[j].style.display = '';
   }
   var onSelectEvent="";
   if(flowTabArr[j].onSelectEvent != undefined && flowTabArr[j].onSelectEvent != ''){
    onSelectEvent = flowTabArr[j].onSelectEvent;
   }
   innerHtml += ' <td class="'+className+'" forTabDivId="'+flowTabArr[j].uniqueID+'" onClick="displayTabDiv(this,\''+flowTabArr[j].uniqueID+'\');'+onSelectEvent+'"><B>'+flowTabArr[j].tabTitle+'</B></td>'
   // 添加隐藏tab方法，js可以直接调用
   flowTabArr[j].hide = function(){
    this.style.display = "none";
    if($("td[forTabDivId='"+this.uniqueID+"']") != null){
     $("td[forTabDivId='"+this.uniqueID+"']")[0].style.display = "none";
    }
   };
   // 添加显示tab方法，js可以直接调用
   flowTabArr[j].show = function(){
    //this.style.display = "";
    if($("td[forTabDivId='"+this.uniqueID+"']") != null){
     $("td[forTabDivId='"+this.uniqueID+"']")[0].style.display = "";
     //$("td[forTabDivId='"+this.uniqueID+"']")[0].click();
    }
   };
  }
  innerHtml += ' <td class="dbTitleBl">  </td>';
  innerHtml += ' </tr>';
    innerHtml += '</table>';
    flowPanelArr[i].insertAdjacentHTML("beforeBegin",innerHtml);
}
}

// tab的点击事件
function displayTabDiv(tdObj,divId){
var showObj = document.getElementById(divId);
var flowPanelObj = showObj.parentElement;
var flowTabArr = flowPanelObj.children;
for(var j=0; j<flowTabArr.length; j++){
flowTabArr[j].style.display = "none";
}
showObj.style.display = "";

var trObj = tdObj.parentElement;
var tdTabArr = trObj.children;
for(var j=1; j<tdTabArr.length-1; j++){
tdTabArr[j].className = "defTD";
}
tdObj.className = "selectTD";
}