<style type="text/css">
* {font-size:12px; font-family:dotum;} 
.bt1cc { border-top:1px solid #000; }
.bl1cc { border-left:1px solid #cccccc; }
.br1cc { border-right:1px solid #cccccc; }
.bb1cc { border-bottom:1px solid #cccccc; }
.bb1f5 { border-bottom:1px solid #f5f5f5; }
 
.slide-tab { border:1px solid #cccccc; overflow-x:hidden; position:relative; margin:10px 0 0 0; width:200px; z-index:10; }
.slide-tab-line { height:26px; position:relative; width:200px; z-index:10; }
#slide-tab-menu
{
    clear:both;
font-family:Dotum;
font-size:11px;
letter-spacing:-1px;
position:absolute;
white-space:nowrap;
z-index:20;
}
 
#slide-tab-menu a { display:inline-block; height:26px; line-height:26px; width: 50px; margin:0; }
#slide-tab-menu a.select { background-color:#f5f5f5; color:#000000; font-weight:bold; text-decoration:none; }
#slide-tab-menu a.noselect {  }
#slide-tab-content { background-color:#f5f5f5; clear:both; height:141px; }
#slide-tab-content div { display:none; height:100%; width:100%; }
</style>
 
<div class="slide-tab">
    <div id="slide-tab-menu"><a href="javascript:;" class='select bb1f5'>메뉴1</a><a href="javascript:;" class='noselect bl1cc'>메뉴2</a><a href="javascript:;" class='noselect bl1cc'>메뉴3</a><a href="javascript:;" class='noselect bl1cc'>메뉴4</a></div>
    <div class="slide-tab-line bb1cc"></div>
    <div id="slide-tab-content">        <div style="display:block;padding:10px 0 0 10px;text-align:left;">죄송합니다. 테스트에요</div>
        <div style="padding:10px 0 0 10px;text-align:left;">테스트 랑께요.</div>
        <div style="padding:10px 0 0 10px;text-align:left;">어허 이사람이 ..</div>
<div style="padding:10px 0 0 10px;text-align:left;">이양반이 안되겠구만</div>
</div>
</div>
 
<script type="text/javascript">
var tabs = document.getElementById("slide-tab-menu");
 
window.onload = function()
{
    tabs.func_onclick = function(e)
    {
        var e = e || window.event;
        var target = e.srcElement || e.target;
 
        if (target.nodeName.toUpperCase() == "A")
        {
            target.blur();
 
            if (target == this.target)
                return;
 
            if (this.target_obj != null)
                this.target_obj.className = "";
 
            this.target_obj = target;
 
            var childs = this.children;
 
            for (var i=0; i<childs.length; i++)
            {
                if (childs[0] == childs[i])
                {
                    if (target == childs[i])
                        childs[i].className = "select bb1f5";
                    else
                        childs[i].className = "noselect";
                }
                else if (childs[childs.length] == childs[i])
                {
                    if (target == childs[i])
                        childs[i].className = "select bb1f5";
                    else
                        childs[i].className = "noselect";
                }
                else
                {
                    if (target == childs[i])
                    {
                        if(i>1)
childs[i-1].className = "noselect bl1cc br1cc";
else
childs[i-1].className = "noselect br1cc";
                        childs[i].className = "select bb1f5";
                    }
                    else
                        childs[i].className = "noselect bl1cc";
                }
 
                document.getElementById("slide-tab-content").children[i].style.display = target == childs[i] ? "block" : "none";
            }
        }
    };
 
    tabs.func_get_position = function(obj)
    {
        var tmp_obj = obj;
        var result = {width : 0, height : 0, left : 0, top : 0};
 
        while (tmp_obj.offsetParent)
        {
            if (result.width == 0) result.width = tmp_obj.offsetWidth;
            if (result.height == 0) result.height = tmp_obj.offsetHeight;
 
            result.left += tmp_obj.offsetLeft;
            result.top += tmp_obj.offsetTop;
 
            tmp_obj = tmp_obj.offsetParent;
        }
 
        return result;
    };
 
    tabs.func_slide = function()
    {
        tabs.left -= (tabs.left - tabs.targetLeft) * 0.1;
        tabs.style.left = -tabs.left + "px";
 
        if (Math.round(tabs.left) == tabs.targetLeft)
            return;
 
        tabs.move_timeout = setTimeout(tabs.func_slide, 1);
    };
 
    tabs.onclick = tabs.func_onclick;
    window.onresize = function() { tabs.position = tabs.func_get_position(tabs); };
    tabs.onmousemove = function(e)
    {
        var e = e || window.event;
        this.percent = ((e.clientX - this.position.left) / tabs.parentNode.offsetWidth) * 100;
        this.targetLeft = Math.round(((this.offsetWidth - tabs.parentNode.offsetWidth) / 100) * this.percent);
 
        clearTimeout(this.move_timeout);
        this.move_timeout = setTimeout(tabs.func_slide, 1);
    };
 
    tabs.left = 0;
    tabs.is_move = false;
    tabs.target_obj = null;
    tabs.position = tabs.func_get_position(tabs);
 
    tabs.onselectstart = function() { return false; };
    tabs.ondragstart = function() { return false; };
};
</script>

else
                {
                    if (target == childs[i])
                    {
                       
childs[i-1].className = "noselect bl1cc br1cc";
                        childs[i].className = "select bb1f5";
                    }
                    else
                        childs[i].className = "noselect bl1cc";
                }

=>



                else
                {
                    if (target == childs[i])
                    {
                        if(i>1)
childs[i-1].className = "noselect bl1cc br1cc";
else
childs[i-1].className = "noselect br1cc";
                        childs[i].className = "select bb1f5";
                    }
                    else
                        childs[i].className = "noselect bl1cc";
                }



메뉴2를 클릭했을때 1px 오류는
메뉴2를 클릭했을때 i-1의 클래스(즉 메뉴1의 클래스) 변경이 들어가서 그렇습니다
왼쪽 border 변화가 생기는 거죠
메뉴 2일때는 border 변화가 생기지 않도록 if 문을 추가하시면 될것 같습니다.
위 댓글 소스에서 * {font-size:12px; font-family:dotum;}  는 삭제하시면 됩니다.