先来看看效果演示(里面插了点广告,可能速度有点慢,呵呵):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 parentObj = thisObj.parentNode;
var aTab = parentObj.getElementsByTagName('DIV')[0];
countObjects = 0;
var startPos = 2;
var previousObjectActive = false;
while(aTab){
if(aTab.tagName=='DIV'){
if(previousObjectActive){
previousObjectActive = false;
startPos-=2;
}
if(aTab==thisObj){
startPos-=2;
previousObjectActive=true;
setPadding(aTab,textPadding+1);
}else{
setPadding(aTab,textPadding);
}
aTab.style.left = startPos + 'px';
countObjects++;
startPos+=2;
}
aTab = aTab.nextSibling;
}
return;
}
function tabClick()
{
showTab(this.id.replace(/[^d]/g,''));
}
function rolloverTab()
{
if(this.className.indexOf('tabInactive')>=0){
this.className='inactiveTabOver';
var img = this.getElementsByTagName('IMG')[0];
img.src = 'images/tab_right_over.gif';
}
}
function rolloutTab()
{
if(this.className == 'inactiveTabOver'){
this.className='tabInactive';
var img = this.getElementsByTagName('IMG')[0];
img.src = 'images/tab_right_inactive.gif';
}
}
function initTabs(tabTitles,activeTab,width,height)
{
tabObj = document.getElementById('macrolong_tabView');
width = width + '';
if(width.indexOf('%')<0)width= width + 'px';
tabObj.style.width = width;
height = height + '';
if(height.length>0){
if(height.indexOf('%')<0)height= height + 'px';
tabObj.style.height = height;
}
var tabDiv = document.createElement('DIV');
var firstDiv = tabObj.getElementsByTagName('DIV')[0];
tabObj.insertBefore(tabDiv,firstDiv);
tabDiv.className = 'macrolong_tabPane';
for(var no=0;no<tabTitles.length;no++){
var aTab = document.createElement('DIV');
aTab.id = 'tabTab' + no;
aTab.onmouseover = rolloverTab;
aTab.onmouseout = rolloutTab;
aTab.onclick = tabClick;
aTab.className='tabInactive';
tabDiv.appendChild(aTab);
var span = document.createElement('SPAN');
span.innerHTML = tabTitles[no];
aTab.appendChild(span);
var img = document.createElement('IMG');
img.valign = 'bottom';
img.src = 'images/tab_right_inactive.gif';
// IE5.X FIX
if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){
img.style.styleFloat = 'none';
img.style.position = 'relative';
img.style.top = '4px'
span.style.paddingTop = '4px';
aTab.style.cursor = 'hand';
} // End IE5.x FIX
aTab.appendChild(img);
}
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"><!--
google_ad_client = "pub-5527330497656431";
google_ad_width = 336;
google_ad_height = 280;
google_ad_format = "336x280_as";
google_ad_type = "text_image";
google_ad_channel ="";
//--></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>