好久没写了，求助一个导航栏的实现

为什么要用js，css不就可以了！
效果如此，样式自己修改<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>选项卡</title>
    <style type="text/css">
    *{margin:0px;padiving:0px;}
    body{ padiving:0;font:12px "宋体"; height:100%; width:100%; }
    ul,li{ list-style-type:none;padding:0px;}
    .tabHeads{width:962px;height:31px;margin:100px auto 0px;background-color:#31E2B7; }

    .tabHeads div{height:198px;line-height:25px;width:500px;padding:5px;overflow:auto;background-color:#eff;position:absolute; z-index:99999;display:none;border:1px solid red;}
    .tabs{width:100px;height:25px;line-height:25px;margin:5px 2px 0px;border:1px solid #333;border-BOTTOM:none;text-align:center;display:inline;float:left;}
    .curTab{color:red;background-color:#eff;}
</style>
</head>
<body>
<div style="width:960px; height:auto; margin:0px auto; border:1px sliod red;">    <div style="width:960px; height:50px; text-align:center;">
    <p></p>
    头部
    </div>      <div class="tabHeads" id='tabHeads'>
            <ul style="position:absolute; z-index:9999;">
                <li style="margin-left:50px;" class="tabs">菜单1</li>
                <li class="tabs">菜单2</li>
                <li class="tabs">菜单3</li>
                <li class="tabs">菜单4</li>
                <li class="tabs">菜单5</li>
                <li class="tabs">菜单6</li>
            </ul>
             <div  >
                <textarea   rows=3 cols="20"></textarea>菜单1
            </div>
            <div >
                <textarea   rows=3 cols="20">234656</textarea>菜单2a2
            </div>
            <div  >
                <textarea  rows=3 cols="20"></textarea>菜单3a3
            </div>
            <div >
                <textarea   rows=3 cols="20"></textarea>菜单4
            </div>
            <div >
                <textarea   rows=3 cols="20">234656</textarea>菜单5
            </div>
            <div >
                <textarea  rows=3 cols="20"></textarea>菜单6
            </div>
        </div>

        <div style="width:960px; height:600px; text-align:center; background-color:#aaa;">
        <div style="height:200px;"></div>
    页面内容
    </div>

</div>
<div id="div_back" style="width:100%; height:100%;position:absolute; z-index:999;top:0;left:0;display:none; background-color:#ddd; filter:alpha(opacity=50);opacity:0.5"></div>
</body>
<script type="text/javascript"></script>
<script type="text/javascript">
if(typeof(HTMLElement) != "undefined")  // 给非IE 浏览器添加方法 contains
{
    HTMLElement.prototype.contains = function(obj)
    {
      while(obj != null &&  typeof(obj.tagName) != "undefined")
      {
            if(obj == this)
              return true;
            obj = obj.parentNode;
      }
            return false;
    };
} var $ = function (id,obj) {
    return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
    return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
};  //选项卡类，头，内容，选中的索引，选中样式，默认样式,切换时间间隔（毫秒）
function Tab(heads,contents,selectedIndex,curStyle,style,space)
{
    if(heads && contents && heads.length　&& contents.length &&  heads.length==contents.length)
    {
        this.heads=heads;
        this.contents=contents;
    }else
    {
        alert("参数错误！");
        return;
    }
    this.selectedIndex = selectedIndex||0;
    this.curStyle=curStyle||"";
    this.style = style||"";
    this.space = space || 3000;
    this.timer=null;
    this.init();
}Tab.prototype.init=function()
{
    var obj = this;
    for(var i=0;i<obj.heads.length;i++)
    {
        obj.heads[i].index=i;
        obj.heads[i].onmouseover=function(){clearInterval(obj.timer);obj.setTab(this.index);};
            obj.contents[i].onmouseout= obj.heads[i].onmouseout=function(e){
                e = e||event;
                e = e.toElement || e.relatedTarget ; // IE toElement  FF:relatedTarget
               if(typeof(e)!="undefined" && !this.contains(e))
               {
                 clearInterval(obj.timer);
                 obj.timer=setInterval(function(){obj.setTab(obj.heads.length);},obj.space);
               }
            };
            obj.contents[i].onmouseover=function(e){clearInterval(obj.timer);};
    }
}
Tab.prototype.setTab=function(index)
{
     for(var i=0;i<this.heads.length;i++)
    {
        this.heads[i].className = i == index ? this.style+' '+this.curStyle :this.style;
        this.contents[i].style.display = i == index ? "block" : "none";
    }
   var div_back= $("div_back");
    if(index<this.heads.length)
    {
        div_back.style.width = document.documentElement.scrollWidth +"px";
        div_back.style.height = document.documentElement.scrollHeight +"px";
         div_back.style.display =  "block";
         this.selectedIndex = index;
    }else
    {
        div_back.style.display =  "none";
    }
}
function init()
{
    var heads = $("tabHeads");
    var tabs = $$("div",heads);
    setPoints(heads,$$('li',heads),tabs);
    var tab=new Tab($$('li',heads),tabs,0,'curTab','tabs',1000);

};function setPoints(menu, heads,tabs)
{
   try{
        var t = getAbsPoint(menu).y + menu.offsetHeight ;
        for(var i=0;i<heads.length;i++)
        {
            var p = getAbsPoint(heads[i]);
            tabs[i].style.top = t+"px";

            tabs[i].style.left = p.x +"px";
        }
   }catch(ex){}
};function getAbsPoint(o)
{
    var x = o.offsetLeft;
    var y = o.offsetTop;
    while(o = o.offsetParent)
    {
        x += o.offsetLeft;
        y += o.offsetTop;
    }
    return {'x': x, 'y': y};
};(
    function(){
         if(window.addEventListener){
           window.addEventListener('load', function(e){ init(); },false);
            window.addEventListener('resize', function(e){
            var heads = $("tabHeads");
            var tabs = $$("div",heads);
             setPoints(heads,$$('li',heads),tabs);  },false);
         }else{
           window.attachEvent("onload",function(){ init();});
           window.attachEvent("onresize",function(){ var heads = $("tabHeads");
             var tabs = $$("div",heads);
             setPoints(heads,$$('li',heads),tabs); });
        }
    }
)();
</script></html>

调试易

好久没写了，求助一个导航栏的实现

解决方案 »