求一个javascript功能,实现点击过的菜单变色。
发布网友
发布时间：2022-04-21 16:10
共2个回答
热心网友
时间：2022-04-21 17:39
具体是4个菜单的母容器设ID=mother,4个菜单分别在一个li里如下
<ul id="mother">
<li onclick="changeClass(this)";></li>
</ul>
function changeClass(a)
{
$("#mother").children("li").removeClass("被点击的菜单的CSS类");
$(a).addClass("被点击的菜单的CSS类");
}
如果不用jquery会比较麻烦但是也可以写
function changeClass(a)
{
document.getElementById("mother").getElementsByTagName("li").className="未被点击的CSS类";
a.className="被点击菜单的CSS类";
}
我也忘了是不是className了,你跟踪一下看看有问题也是大小写的问题.但jquery的方法应该是没错的.
像你图片里的菜单html应该差不多这么写
<div id="mother">
<div class="menu">
<span>硬件产品<span>
<ul>
<li onclick="changeClass(this)";>终端产品</li>
<li onclick="changeClass(this)";>软件产品</li>
</ul>
</div>
</div>
css这方面的问题在写就多了,你估计看着也烦。具体就是也写background，text-alain 和float的问题。应该不难写。
ps:你这不叫单击过的菜单变色.二是当前选中的菜单变色.谢谢追问我点了菜单后是链接到另一个新的页面去了。菜单这部分被include过去了，有没像COOKIE一样能记忆得住，哪个菜单背景色该变的。而不是点的瞬间变色了，到了新打开的页面，又没变。
追答不知道你后台使用什么代码写的。
一般情况下都是后台直接设置前台高亮菜单的。
onready事件里这样写
function onreadyfunc()
{
var lis=document.getElementById("mother").getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
var href = location.subStr(location.lastIndexOf("/"));
if(lis[i].getElementsByTagName["a"][0].href==href)
{
lis[i].className="高亮CSS"
}else
{
lis[i].className="非高亮CSS"
}
}
}
ps:百度这边没有代码编辑器,可能有JS代码的大小写错误,你自己编辑的时候注意点儿,.
热心网友
时间：2022-04-21 18:57
不过好像IE6之兼容 a:hover
你可以<li><a href="#">软件产品</a></li> 设置样式：
li a {
width:200px;
height:100px; 长和宽要刚好和背景变色一般大
display:block; 这个是必须的，使a具有块级元素的性质
background:#FFF;
}
li a:hover { background:#00F;}
这样就可以有以上那种效果啦
js也可以实现
onMouseOver="this.style.backgroundColor='#00F' " onMouseOut="this.style.backgroundColor='#FFF‘ "
或者让ID自增，在js里写几个函数
一般表现都是用css实现比较好，就算用js也是通过控制css来改变样式的
