非常酷的标签菜单效果(DHTML Tab script)

来源：互联网发布：汽车按揭月供怎么算法编辑：程序博客网时间：2024/05/16 04:17

先来看看效果演示(里面插了点广告，可能速度有点慢，呵呵)：attachment/DHTML_Tab_script.htm

怎么样，效果不错吧，现在我们来看看代码．

声明（最好用这个声明，否则脚本可能显示不正常）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

js代码：

　<SCRIPT type=text/javascript>
var textPadding = 3; // Padding at the left of tab text - bigger value gives you wider tabs
var strictDocType = true;

/*下面的代码不要修改，除非您的js比较强*/
var tabObj;
var activeTabIndex = -1;
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (d.d).*/g,'$1')/1;


function setPadding(obj,padding){
   var span = obj.getElementsByTagName('SPAN')[0];
   span.style.paddingLeft = padding + 'px';
   span.style.paddingRight = padding + 'px';
}
function showTab(tabIndex)
{

   if(activeTabIndex>=0){
     if(activeTabIndex==tabIndex)return;
     var obj = document.getElementById('tabTab'+activeTabIndex);
     obj.className='tabInactive';
     var img = obj.getElementsByTagName('IMG')[0];
     img.src = 'images/tab_right_inactive.gif';
     document.getElementById('tabView' + activeTabIndex).style.display='none';
   }

   var thisObj = document.getElementById('tabTab'+tabIndex);
   thisObj.className='tabActive';
   var img = thisObj.getElementsByTagName('IMG')[0];
   img.src = 'images/tab_right_active.gif';
   document.getElementById('tabView' + tabIndex).style.display='block';
   activeTabIndex = tabIndex;

   var tabs = tabObj.getElementsByTagName('DIV');
   var divCounter = 0;
   for(var no=0;no<tabs.length;no++){
     if(tabs[no].className=='macrolong_aTab'){
       if(height.length>0)tabs[no].style.height = height;
       tabs[no].style.display='none';
       tabs[no].id = 'tabView' + divCounter;
       divCounter++;
     }
   }
   showTab(activeTab);
}
</SCRIPT>　

css代码：

BODY {
MARGIN: 10px
}
.ad {
MARGIN-TOP: 30px; PADDING-TOP: 10px
}
.macrolong_tabPane {
BORDER-BOTTOM: #919b9c 1px solid; HEIGHT: 21px
}
.macrolong_aTab {
BORDER-RIGHT: #919b9c 1px solid; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: #919b9c 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #919b9c 1px solid; FONT-FAMILY: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif
}
.macrolong_tabPane DIV {
BACKGROUND-POSITION: left bottom; PADDING-LEFT: 3px; FLOAT: left; MARGIN-LEFT: 0px; VERTICAL-ALIGN: middle; CURSOR: pointer; BOTTOM: -1px; MARGIN-RIGHT: 0px; BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 100%
}
.macrolong_tabPane .tabActive {
Z-INDEX: 10; BACKGROUND-IMAGE: url(images/tab_left_active.gif); MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.macrolong_tabPane .tabInactive {
Z-INDEX: 1; BACKGROUND-IMAGE: url(images/tab_left_inactive.gif); MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.macrolong_tabPane .inactiveTabOver {
BACKGROUND-IMAGE: url(images/tab_left_over.gif); MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px
}
.macrolong_tabPane SPAN {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; FLOAT: left; VERTICAL-ALIGN: top; LINE-HEIGHT: 21px; FONT-FAMILY: arial
}
.macrolong_tabPane .tabActive SPAN {
PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px
}
.macrolong_tabPane IMG {
FLOAT: left
}

html代码：

<DIV id=macrolong_tabView>
<DIV class=macrolong_aTab> This is the content of the
first tab. This is just a plain <DIV>.
<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
The tabs are created by a
javascript function. This is the content of the first tab. This is just a plain
<DIV>. The tabs are created by a javascript function. This is the content
of the first tab. This is just a plain <DIV>. The tabs are created by a
javascript function.
</DIV>
<DIV class=macrolong_aTab>This is the content of the second tab.</DIV>
<DIV class=macrolong_aTab>This script is tested in
<UL>
<LI>IE 5.5
<LI>IE 6
<LI>Opera 8.5
<LI>Firefox </LI>
</UL>
</DIV>
<DIV class=macrolong_aTab>Content of tab 4
</DIV></DIV>

<SCRIPT type=text/javascript>
initTabs(Array('Menu scripts','Calender','Menus','About us'),0,500,400);
</SCRIPT>