js tab切换卡

最新推荐文章于 2023-02-11 11:28:40 发布

90的程序爱好者

最新推荐文章于 2023-02-11 11:28:40 发布

阅读量494

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zlzdj/article/details/9617899

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-
-
avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]
<!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>javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]</title>
<script type="text/javascript"> 
      function nTabs(thisObj,Num){ 
        if(thisObj.className == "active")return; 
        var tabObj = thisObj.parentNode.id; 
        var tabList = document.getElementById(tabObj).getElementsByTagName("li"); 
        for(i=0; i <tabList.length; i++){ 
          if (i == Num){ 
            thisObj.className = "active"; 
            document.getElementById(tabObj+"_Content"+i).style.display = "block"; 
          }else{ 
            tabList[i].className = "normal"; 
            document.getElementById(tabObj+"_Content"+i).style.display = "none"; 
          } 
        } 
      } 
    </script> 
 <style type="text/css">
  #myTab02  li , #myTab li{
   float:left;
   display:block;
   width:50px;
   border:1px solid #666666;
  }
     #ac ,#ac1{
   width:150px;
   height:50px;
   clear:both;
  }
    body,td,th {
  font-size: 12px;
    }
</style>
</head>

<body>
  <ul id="myTab02">
  <li class="active" οnclick="nTabs(this,0);">新房</li>
        <li class="normal" οnclick="nTabs(this,1);">二手房</li>
        <li class="normal" οnclick="nTabs(this,2);">租房</li>
  <li class="normal" οnclick="nTabs(this,3);">租房</li>
  </ul>
  <div style="clear:both"></div>
  <div id="ac">
   <div id="myTab02_Content0">
    aaaa
   </div>
   <div id="myTab02_Content1" style="display:none;">
    bbb
   </div>
   <div id="myTab02_Content2" style="display:none;">
    ccc
   </div>
   <div id="myTab02_Content3" style="display:none;">
    dddd
   </div>
  </div>
  
  <div style="clear:both"></div>
  <ul id="myTab">
  <li class="active" οnclick="nTabs(this,0);">新房</li>
        <li class="normal" οnclick="nTabs(this,1);">二手房</li>
        <li class="normal" οnclick="nTabs(this,2);">租房</li>
  <li class="normal" οnclick="nTabs(this,3);">租房</li>
  </ul>
  
  <div style="clear:both"></div>
  <div id="ac1">
   <div id="myTab_Content0">
    aaaa
   </div>
   <div id="myTab_Content1" style="display:none;">
    bbb
   </div>
   <div id="myTab_Content2" style="display:none;">
    ccc
   </div>
   <div id="myTab_Content3" style="display:none;">
    dddd
   </div>
  </div>

  

</body>
</html>

90的程序爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js tab切换卡

--avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器] function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var
复制链接

扫一扫