js 横向选项卡-CSDN博客

本文链接：https://blog.csdn.net/superherosk123/article/details/2637951

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
<!-- 边框下边不显示 -->
.bottom{
 background-color: #8AF2ED;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: none;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}
<!-- 边框上边不显示 -->
.top{
 background-color: #8AF2ED;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}
<!-- 边框下边线有颜色,无背景 -->
.btmline{
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: solid;
 border-left-style: none;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}
-->
</style>
</head>

<body>
<table id="t1" width="40%" height="40%" border="1" cellpadding="1" cellspacing="0">
  <tr>
    <td class="bottom" width="89" height="15" bgcolor="#CCCCCC" οnclick="showOpt(t1)">1</td>
    <td width="89" bgcolor="#CCCCCC" οnclick="showOpt(t1)">2</td>
    <td width="88" bgcolor="#CCCCCC" οnclick="showOpt(t1)">3</td>
  </tr>
  <tr>
    <td  class="top" height="20%" colspan="3" bgcolor="#CCCCCC"><div>第一选项卡的数据</div></td>
  </tr>
  <tr  style="display:none">
    <td height="20%" colspan="3" bgcolor="#CCCCCC"><div>第二选项卡的数据</div></td>
  </tr>
  <tr style="display:none">
    <td height="20%" colspan="3" bgcolor="#CCCCCC" ><div>第三选项卡的数据</div></td>
  </tr>
</table>
</body>
</html>
<script type="text/javascript">
  function showOpt(t){
    var showRow=0;
  //获取 恰当的行序号
  for(i=0;i<t.rows[0].cells.length;i++){
   var std=event.srcElement;
   if(std==t.rows[0].cells[i]){
    showRow=i+1;
    event.srcElement.className="bottom";
   }else{
    t.rows[0].cells[i].className="btmline"; 
   }
  }
  //显示 恰当的行并改变样式
  for(i=1;i<t.rows.length;i++){
   if(i==showRow){
    t.rows[i].style.display="";
    for(j=0;j<t.rows[i].cells.length;j++){
     t.rows[i].cells[j].className="top"; 
    }
   }else{
    t.rows[i].style.display="none";
   }
  }
 
  }
</script>