Javascript 更改背景onclick两次

我有三个盒子。单击任何框时，将显示相应的

div

，背景色变为红色。但是，当我两次单击同一个框时，

div

正在消失，但背景保持不变（它应该变成白色）。请帮帮我

只是一件小事：

将此部分放在函数的末尾

show\u hide\u f（）

：

您的完整JS已更新：

function show_hide_f(id) {
    var obj = document.getElementById(id);
    var objPortal = document.getElementById("web");
    var objPersonal = document.getElementById("personal");
    var objPost = document.getElementById("post");

    if (obj == objPortal) {
        document.getElementById("webLI").style.background = "red";
        document.getElementById("personalLI").style.background = "white";
        document.getElementById("postLI").style.background = "white";
        objPersonal.style.display = "none";
        objPost.style.display = "none";

    } else if (obj == objPersonal) {
        document.getElementById("webLI").style.background = "white";
        document.getElementById("personalLI").style.background = "red";
        document.getElementById("postLI").style.background = "white";
        objPortal.style.display = "none";
        objPost.style.display = "none";
    } else if (obj == objPost) {
        document.getElementById("postLI").style.background = "red";
        document.getElementById("personalLI").style.background = "white";
        document.getElementById("webLI").style.background = "white";
        objPersonal.style.display = "none";
        objPortal.style.display = "none";
    }
    if (obj.style.display != "block") {
        obj.style.display = "block";
    } else {
        obj.style.display = "none";
        document.getElementById("webLI").style.background = "white";
        document.getElementById("personalLI").style.background = "white";
        document.getElementById("postLI").style.background = "white";
    }
}

---

也可以在此处查看更改：

最简单的方法是在第一个else{}之后返回false

var obj = document.getElementById(id);
if (obj.style.display != "block") {
    obj.style.display = "block";

} else {
    obj.style.display = "none";
    document.getElementById("webLI").style.background = "white";
    document.getElementById("personalLI").style.background = "white";
    document.getElementById("postLI").style.background = "white";
    return false; // <-- here
}

var obj=document.getElementById（id）；
if（obj.style.display！=“块”）{
obj.style.display=“块”；
}否则{
obj.style.display=“无”；
document.getElementById（“webLI”）.style.background=“白色”；
document.getElementById（“personalLI”）.style.background=“白色”；
document.getElementById（“postLI”）.style.background=“白色”；
return false；//您可以使用一个小的JQuery函数，第一个函数位于下面的代码中：


$（“li”）。在（“dblclick”，函数（）上{
$（this.css（“背景”、“白色”）；
});
函数显示隐藏（id）{
var obj=document.getElementById（id）；
if（obj.style.display！=“块”）{
obj.style.display=“块”；
}否则{
obj.style.display=“无”；
document.getElementById（“webLI”）.style.background=“白色”；
document.getElementById（“personalLI”）.style.background=“白色”；
document.getElementById（“postLI”）.style.background=“白色”；
}
var objPortal=document.getElementById（“web”）；
var objPersonal=document.getElementById（“个人”）；
var objPost=document.getElementById（“post”）；
if（obj==objPortal）{
document.getElementById（“webLI”）.style.background=“红色”；
document.getElementById（“personalLI”）.style.background=“白色”；
document.getElementById（“postLI”）.style.background=“白色”；
objPersonal.style.display=“无”；
objPost.style.display=“无”；
}else if（obj==obj个人）{
document.getElementById（“webLI”）.style.background=“白色”；
document.getElementById（“personalLI”）.style.background=“红色”；
document.getElementById（“postLI”）.style.background=“白色”；
objPortal.style.display=“无”；
objPost.style.display=“无”；
}else if（obj==objPost）{
document.getElementById（“postLI”）.style.background=“红色”；
document.getElementById（“personalLI”）.style.background=“白色”；
document.getElementById（“webLI”）.style.background=“白色”；
objPersonal.style.display=“无”；
objPortal.style.display=“无”；
}
}
.main菜单{
位置：相对位置；
}
.main菜单{
列表样式类型：无；
位置：相对位置；
}
李先生{
宽度：100px；
盒影：4 10像素rgba（0,0,0,0.3）；
-moz盒阴影：4px4x10pxRGBA（0,0,0,0.3）；
-webkit盒阴影：4px4x10pxRGBA（0,0,0,0.3）；
过滤器：progid:DXImageTransform.Microsoft.dropshadow（offX=10，offY=10，color=rgba（0,0,0,0.3））；
文本对齐：居中；
高度：45px；
线高：45px；
右边距：10px；
浮动：左；
文本转换：大写；
填充：10px；
背景：白色；
光标：指针；
位置：相对位置；
显示：内联flex；
边框：1px纯灰；
}
.main菜单ul li：悬停{
盒影：-4-4 10px rgba（0,0,0,0.3）；
-莫兹盒阴影：-4px-4px10px rgba（0,0,0,0.3）；
-网络工具包盒阴影：-4px-4px 10px rgba（0,0,0,0.3）；
过滤器：progid:DXImageTransform.Microsoft.dropshadow（offX=10，offY=10，color=rgba（0,0,0,0.3））；
背景：白色；
}
.main菜单ul li a{
颜色：黑色！重要；
文字装饰：无；
边界：无；
文本对齐：居中；
}
.main菜单ul li a：悬停{
}


个人的

张贴

Web










网状物
个人的
Post
您忘记实际检查代码中的当前背景是否为红色
var obj = document.getElementById(id);
if (obj.style.display != "block") {
    obj.style.display = "block";

} else {
    obj.style.display = "none";
    document.getElementById("webLI").style.background = "white";
    document.getElementById("personalLI").style.background = "white";
    document.getElementById("postLI").style.background = "white";
    return false; // <-- here
}