87,989
社区成员
发帖
与我相关
我的任务
分享好久没写了，求助一个导航栏的实现
这种类型的导航栏用javascript如何实现？
有现成的代码吗？时间比较急，如果在其他网站上看到了也告知一声，学习下
有现成的代码吗？时间比较急，如果在其他网站上看到了也告知一声，学习下
...全文
请发表友善的回复…
发表回复
hch126163 2011-09-28
- 打赏
- 举报
效果如此，样式自己修改
<!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>
筱伟 2011-09-28
- 打赏
- 举报
为什么要用js，css不就可以了！
