我的网站首页面引用了三个相同的tab选项卡js特效,结果就第一个起作用,其他两个没反应,怎么办?
<scripttype="text/jscript">functionsetTab(name,cursel,n){for(i=1;i<=n;i++){varmenu=do...
<script type="text/jscript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script> 展开
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script> 展开
2个回答
展开全部
<html>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<head><title>tab</title>
<style>
#menu{
height:32px;
}
#a{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
text-color:#000;
}
#b{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
}
#c{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
}
#more{
width:70px;
height:30px;
float:left;
margin:0 0 0 5px;
cursor:default;
}
#sub{
top:-1px;
position:relative;
z-index:-1;
}
#sub .submenu{
clear:left;
border-top:3px solid green;
width:500px;
height:300px;
}
#menu .over{
color:white;
background:green;
font-weight:bold;
border-bottom:1px solid white;
}
</style>
</head>
<body>
<div id="menu">
<div id="a">热点新闻</div>
<div id="b">最新评论</div>
<div id="c">标签3</div>
<div id="more"><a href="*"><img src="a.jpg" width:70px height:30px /></a></div>
</div>
<div id="sub">
<div class="submenu">11<div></div></div>
<div class="submenu">22</div>
<div class="submenu">33</div>
</div>
<script>
function $(id){return document.getElementById(id)}
function change_tab(x,y,z){
var menu_id=x//标签ID
var submenu_id=y//子标签ID
change_t=$(menu_id).getElementsByTagName("div");//所有的menu
change_tt=$(submenu_id).getElementsByTagName("div");
change_s= new Array();
for(i=0;i<change_tt.length;i++){
if(change_tt[i].parentNode.id==submenu_id){
change_s.push(change_tt[i])//将参数添加到原数组末尾
}
}
for(i=0;i<change_t.length-1;i++){
if(document.all){//IE
var cc= function(i){
return function(){
change_abc(i)
};
};
change_t[i].attachEvent("onmouseover",cc(i));
}
else{//ff
change_t[i].setAttribute("onmouseover","change_abc("+i+")");
}
}
change_abc(z);//初始状态
}
function change_abc(i){
for(j=0;j<change_t.length-1;j++)change_t[j].className=''//让所有的按钮变暗
change_t[i].className='over'//让自己亮
for(j=0;j<change_s.length;j++)change_s[j].style.display='none'//让所有框消失
change_s[i].style.display='block';
}
change_tab("menu","sub",2)//menu的ID , 内容的id , 初始值
</script>
</body>
<html>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<head><title>tab</title>
<style>
#menu{
height:32px;
}
#a{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
text-color:#000;
}
#b{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
}
#c{
width:70px;
height:30px;
line-height:30px;
border:1px solid #ccc;
float:left;
margin:0 0 0 5px;
cursor:default;
text-align:center;
background:#ccc;
}
#more{
width:70px;
height:30px;
float:left;
margin:0 0 0 5px;
cursor:default;
}
#sub{
top:-1px;
position:relative;
z-index:-1;
}
#sub .submenu{
clear:left;
border-top:3px solid green;
width:500px;
height:300px;
}
#menu .over{
color:white;
background:green;
font-weight:bold;
border-bottom:1px solid white;
}
</style>
</head>
<body>
<div id="menu">
<div id="a">热点新闻</div>
<div id="b">最新评论</div>
<div id="c">标签3</div>
<div id="more"><a href="*"><img src="a.jpg" width:70px height:30px /></a></div>
</div>
<div id="sub">
<div class="submenu">11<div></div></div>
<div class="submenu">22</div>
<div class="submenu">33</div>
</div>
<script>
function $(id){return document.getElementById(id)}
function change_tab(x,y,z){
var menu_id=x//标签ID
var submenu_id=y//子标签ID
change_t=$(menu_id).getElementsByTagName("div");//所有的menu
change_tt=$(submenu_id).getElementsByTagName("div");
change_s= new Array();
for(i=0;i<change_tt.length;i++){
if(change_tt[i].parentNode.id==submenu_id){
change_s.push(change_tt[i])//将参数添加到原数组末尾
}
}
for(i=0;i<change_t.length-1;i++){
if(document.all){//IE
var cc= function(i){
return function(){
change_abc(i)
};
};
change_t[i].attachEvent("onmouseover",cc(i));
}
else{//ff
change_t[i].setAttribute("onmouseover","change_abc("+i+")");
}
}
change_abc(z);//初始状态
}
function change_abc(i){
for(j=0;j<change_t.length-1;j++)change_t[j].className=''//让所有的按钮变暗
change_t[i].className='over'//让自己亮
for(j=0;j<change_s.length;j++)change_s[j].style.display='none'//让所有框消失
change_s[i].style.display='block';
}
change_tab("menu","sub",2)//menu的ID , 内容的id , 初始值
</script>
</body>
<html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询