이 자바 스크립트에서 탭 간격을 줄이는 방법?

Question

나는 이것을 tab system와 함께 해킹했습니다.

각 탭 사이의 간격 (패딩)을 줄여야합니다. 불 덩어리에서 보았을 때 javascript 함수는 각 왼쪽 픽셀 사이에 여러 가지 왼쪽 픽셀을 추가하는 것을 볼 수 있습니다. 왼쪽 패딩 대신 왼쪽 패딩이 필요합니다. 각 탭 사이에는 100px가 필요합니다. 어떻게 내가 그걸 할 수 있을지 아는가?

아래는 자바 스크립트입니다.

귀하의 질문에 설명으로 이

<script type="text/javascript"> 
var menuAlignment = 'left'; // Align menu to the left or right?  
var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items 
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover 
var leftAlignSubItems = true; // left align sub items t 

var activeMenuItem = false; // Don't change this option. It should initially be false 
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one. 
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie 

var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; 
var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false; 
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1; 

/* 
These cookie functions are downloaded from 
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm 
*/ 
function Get_Cookie(name) { 
    var start = document.cookie.indexOf(name+"="); 
    var len = start+name.length+1; 
    if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
    if (start == -1) return null; 
    var end = document.cookie.indexOf(";",len); 
    if (end == -1) end = document.cookie.length; 
    return unescape(document.cookie.substring(len,end)); 
} 
// This function has been slightly modified 
function Set_Cookie(name,value,expires,path,domain,secure) { 
    expires = expires * 60*60*24*1000; 
    var today = new Date(); 
    var expires_date = new Date(today.getTime() + (expires)); 
    var cookieString = name + "=" +escape(value) + 
     ((expires) ? ";expires=" + expires_date.toGMTString() : "") + 
     ((path) ? ";path=" + path : "") + 
     ((domain) ? ";domain=" + domain : "") + 
     ((secure) ? ";secure" : ""); 
    document.cookie = cookieString; 
} 

function showHide() 
{ 
    if(activeMenuItem){ 
     activeMenuItem.className = 'inactiveMenuItem'; 
     var theId = activeMenuItem.id.replace(/[^0-9]/g,''); 
     document.getElementById('submenu_'+theId).style.display='none'; 
     var img = activeMenuItem.getElementsByTagName('IMG'); 
     if(img.length>0)img[0].style.display='none';    
    } 

    var img = this.getElementsByTagName('IMG'); 
    if(img.length>0)img[0].style.display='inline'; 

    activeMenuItem = this;  
    this.className = 'activeMenuItem'; 
    var theId = this.id.replace(/[^0-9]/g,''); 
    document.getElementById('submenu_'+theId).style.display='block'; 



    if(rememberActiveTabByCookie){ 
     Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100); 
    } 
} 

function initMenu() 
{ 
    var mainMenuObj = document.getElementById('mainMenu'); 
    var menuItems = mainMenuObj.getElementsByTagName('A'); 
    if(document.all){ 
     mainMenuObj.style.visibility = 'hidden'; 
     document.getElementById('submenu').style.visibility='hidden'; 
    }  
    if(rememberActiveTabByCookie){ 
     var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + ''; 
     cookieValue = cookieValue.replace(/[^0-9]/g,''); 
     if(cookieValue.length>0 && cookieValue<menuItems.length){ 
      activeTabIndex = cookieValue/1; 
     }   
    } 

    var currentLeftPos = 1; 
    for(var no=0;no<menuItems.length;no++){   
     if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide; 
     menuItems[no].id = 'mainMenuItem' + (no+1); 
     if(menuAlignment=='left') 
      menuItems[no].style.left = currentLeftPos + 'px'; 
     else 
      menuItems[no].style.right = currentLeftPos + 'px'; 
     currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; 

     var img = menuItems[no].getElementsByTagName('IMG'); 
     if(img.length>0){ 
      img[0].style.display='none'; 
      if(MSIE && !Opera && navigatorVersion<7){ 
       img[0].style.bottom = '-1px'; 
       img[0].style.right = '-1px'; 
      } 
     } 

     if(no==activeTabIndex){ 
      menuItems[no].className='activeMenuItem'; 
      activeMenuItem = menuItems[no]; 
      var img = activeMenuItem.getElementsByTagName('IMG'); 
      if(img.length>0)img[0].style.display='inline'; 

     }else menuItems[no].className='inactiveMenuItem'; 
     if(!document.all)menuItems[no].style.bottom = '-1px'; 
     if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px'; 


    }  

    var mainMenuLinks = mainMenuObj.getElementsByTagName('A'); 

    var subCounter = 1; 
    var parentWidth = mainMenuObj.offsetWidth; 
    while(document.getElementById('submenu_' + subCounter)){ 
     var subItem = document.getElementById('submenu_' + subCounter); 

     if(leftAlignSubItems){ 
      // No action 
     }else{       
      var leftPos = mainMenuLinks[subCounter-1].offsetLeft; 
      document.getElementById('submenu_'+subCounter).style.paddingLeft = LeftPos + 'px'; 
      subItem.style.position ='absolute'; 
      if(subItem.offsetWidth > parentWidth){ 
       leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);  
      } 
      subItem.style.paddingLeft = leftPos + 'px'; 
      subItem.style.position ='static'; 


     } 
     if(subCounter==(activeTabIndex+1)){ 
      subItem.style.display='block'; 
     }else{ 
      subItem.style.display='none'; 
     } 

     subCounter++; 
    } 
    if(document.all){ 
     mainMenuObj.style.visibility = 'visible'; 
     document.getElementById('submenu').style.visibility='visible'; 
    }  
    document.getElementById('submenu').style.display='block'; 
} 
window.onload = initMenu; 
</script> 

Answer 1

가

나는 당신의 노력을 내려 놓고 싶지는 않지만 솔루션은 매우 복잡 보이는 3GHz의 듀얼 코어 워크 스테이션에서 느린 느낌, 자바 스크립트 오류가 많이 발생하고, 사용자 정의한다 매우 어렵다. 나는 이것이 갈 길이라고 확신하지 않습니다 - 당신이 만들고자하는 변화를 만들 수있는 곳을 찾기 위해 스크립트를 파헤치는 일이 어렵습니다.

예를 들어 오래된 프레임이지만 대부분 신뢰할만한 프레임 워크와 같은 작은 것을 사용하지 않는 이유는 무엇입니까 DOMTab? 널리 사용되는 프레임 워크를 기반으로하는 많은 수의 탭 스크립트가 있습니다 (예 : here.