大家好,我做导航栏时遇到一个问题,还请各位帮忙解决一下:
初始导航栏中的内容“电脑”是白色的,如果我点了“手机”那么手机的背景就为白色,“电脑”则为这个层的背景颜色(橙色),现在遇到的问题是,如何才能在同一页面中(为较少页面的创建)实现这个功能,我用的是onclick,可是每次点击完毕后就又恢复到刚打开页面的那种状态了,感觉onclick没起什么作用,我是这样写的,但是没成功 function qiehuan(num){
for(var id = 0;id<=11;id++)
{ document.getElementById("mynav"+id).className="nav_off";//将所有变为橙色
}
for(var id = 0;id<=11;id++)
{
if(id==num)
{
document.getElementById("mynav"+id).className="nav_on";break;// 点击的那个层变为白色白色
}
}
} nav_off是橙色
初始导航栏中的内容“电脑”是白色的,如果我点了“手机”那么手机的背景就为白色,“电脑”则为这个层的背景颜色(橙色),现在遇到的问题是,如何才能在同一页面中(为较少页面的创建)实现这个功能,我用的是onclick,可是每次点击完毕后就又恢复到刚打开页面的那种状态了,感觉onclick没起什么作用,我是这样写的,但是没成功 function qiehuan(num){
for(var id = 0;id<=11;id++)
{ document.getElementById("mynav"+id).className="nav_off";//将所有变为橙色
}
for(var id = 0;id<=11;id++)
{
if(id==num)
{
document.getElementById("mynav"+id).className="nav_on";break;// 点击的那个层变为白色白色
}
}
} nav_off是橙色
for(var id = 0;id<=11;id++)
{
if(id==num){
document.getElementById("mynav"+id).className="nav_on";break;// 点击的那个层变为白色白色
}
else{
document.getElementById("mynav"+id).className="nav_off";//将所有变为橙色
} } }
<li><a href="main.do?event=toGoodsList1&goodstype_id=13" onclick="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>手机</span></a></li>
闪了一下后就恢复到之前状态了
首先它是个链接,无论你onclick怎么样,它都会跳到href的目的页面,所以onclick时一闪而过
在链接后面用target
num =1//这在每个页面不一样
function qiehuan(){
for(var id = 0;id<=11;id++)
{ document.getElementById("mynav"+id).className="nav_off";//将所有变为橙色
}
for(var id = 0;id<=11;id++)
{
if(id==num)
{
document.getElementById("mynav"+id).className="nav_on";break;// 点击的那个层变为白色白色
}
}
} qiehuan();
如果你担心这个,那就加再个onmouseout=function(this){o.className="nav_off";}
<script>
function qiehuan(o,flag){
if (flag=="w"){ o.className="nav_on";}
else{ o.className="nav_off"; }
}</script>
<li><a href="main.do?event=toGoodsList1&goodstype_id=1" onmouseover ="javascript:qiehuan(this,'w')" onmouseout ="javascript:qiehuan(this,'o')" id="mynav0"><span>数码</span></a></li>
<li><a href="main.do?event=toGoodsList1&goodstype_id=13" onmouseover ="javascript:qiehuan(this,'w')" onmouseout ="javascript:qiehuan(this,'o')" id="mynav1" ><span>手机</span></a></li>
其实,不用JS,用CSS就可以实现你的想法了.在CSS中针对A标签写点hover什么什么的样式......