Question

我正在尝试创建一个页面，它只是一个页面，其中包含不同的div，这些div在未选中时会被隐藏。

目前我的菜单按钮有问题，我想要突出显示所选页面，然后当选择另一个标签时，另一个标签会突出显示。

说主页，关于我们，联系我们

因此，如果它在主div中，Home选项卡会突出显示，但如果它是关于我们的div，则会突出显示about us。我想使用纯CSS，但搜索后没有任何结果，所以我必须坚持使用javascript。

这是我的代码

function Switcher(a,b,c,d,e){
document.getElementById('button1').style.background=a;
document.getElementById('button2').style.background=b;
document.getElementById('button3').style.background=c;
document.getElementById('button4').style.background=d;
document.getElementById('button5').style.background=e;
}

带有OnClick功能的

onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)"

但它似乎没有用，有什么帮助吗？或者其他更简单的建议:)？

Answer 1

使用backgroundColor代替背景：

function Switcher(a,b,c,d,e){
    document.getElementById('button1').style.backgroundColor = a;
    document.getElementById('button2').style.backgroundColor = b;
    document.getElementById('button3').style.backgroundColor = c;
    document.getElementById('button4').style.backgroundColor = d;
    document.getElementById('button5').style.backgroundColor = e;
}

还将参数作为字符串传递：

onClick="Switcher('#c5e043', '#241009', '#241009', '#241009', '#241009')"

Answer 2

或其他更简单的建议:)？

脚本：

function Switcher(Colors)
    {
    var Count=1;

Colors.split(",").forEach(function(xColor) { document.getElementById('button' + Count).style.background = xColor;
Count +=1; });

}

<强>的onClick：

onClick="Switcher("#c5e043,#241009,#241009,#241009,#241009")"

Javascript菜单突出显示切换器

2 个答案: