简单选项卡TAB

最新推荐文章于 2021-06-03 02:52:12 发布

qfljm

最新推荐文章于 2021-06-03 02:52:12 发布

阅读量1.2k

点赞数

分类专栏： -3- javascript 文章标签： div function border javascript object float

本文链接：https://blog.csdn.net/qfljm/article/details/270824

版权

-3- javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<HTML><HEAD><TITLE>无标题文档</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"><META HTTP-EQUIV="imagetoolbar" CONTENT="no"><META NAME="Author" CONTENT="野猪*钦枫.制作">
<STYLE TYPE="text/css"><!--
a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;}
BODY, TD, SELECT{FONT-SIZE:9pt; FONT-FAMILY:"宋体";}
#TabStrip {width:500px;background-color:#66CCFF;padding:10px;}
#TabStrip #TabCard{width:90%;margin:0px;list-style-type: none;}
#TabStrip #TabCard LI {
float:left;
width:100px;
height:20px;
padding-top:4px;
border:1px #7d7d7d solid;
border-bottom:none;
background-color:#CCC;
text-align:center;
cursor:default;
}

#TabStrip #TabBody DIV{
display:none;
border:1px #7d7d7d solid;
background-color:#FFF;
width:100%;
height:400px;
padding:5px;
}

--></STYLE>
<script language="javascript" type="text/JavaScript">
function getIE(obj){
  var t=obj.offsetTop - obj.parentElement.scrollTop;
  var l=obj.offsetLeft - obj.parentElement.scrollLeft;
  while(obj=obj.offsetParent){
   t+=obj.offsetTop - obj.parentElement.scrollTop;
   l+=obj.offsetLeft - obj.parentElement.scrollLeft;
  }
  return {top: t, left:l}
};

function create_div(){
  var div = document.createElement('div');
  var b = document.createElement('b');
  with(div.style){position = 'absolute';zIndex = '99999';borderTop='1px #FFF solid';width ='98px';height = '1px';pixelTop = '-100';pixelLeft = '-100';}
  div.id='_CARD_HR_';
  div.appendChild(b);
  document.body.insertAdjacentElement('afterBegin', div);
};

function set_tab_card(TabIndex){
  var tab = document.getElementById('TabCard');
  var bod = document.getElementById('TabBody');
  var car = (typeof(TabIndex) != 'object')?tab.children[TabIndex]:TabIndex;
  var X_Y = getIE(car);
  if(typeof(_CARD_HR_) == 'undefined')create_div();
  _CARD_HR_.style.pixelTop = X_Y.top+20;
  _CARD_HR_.style.pixelLeft = X_Y.left+1;
  for(var i=0; i < tab.children.length; i++){
   tab.children[i].style.backgroundColor = (tab.children[i] == car)?'#FFF':'#CCC';
   bod.children[i].style.display = (tab.children[i] == car)?'block':'none';
  }
};
</script>
</HEAD>

<BODY οnlοad="set_tab_card(0);" bgcolor="#FFFFFF" text="#000000" leftmargin="20" topmargin="20">
<DIV id="TabStrip">
<UL id="TabCard">
  <LI οnclick="set_tab_card(this);">用户管理</LI>
  <LI οnclick="set_tab_card(this);">用户组管理</LI>
</UL>
<DIV id="TabBody">
  <DIV>测丶式1</DIV>
  <DIV>测丶式2</DIV>
</DIV>
</DIV>
</BODY>
</HTML>