Question

我有三个盒子。当我单击任何框时，会显示相应的div，背景颜色变为红色。但是当我两次点击同一个框时，div正在消失，但背景保持不变（它应该变为白色）。请帮帮我。

Answer 1

只是一件小事：

将此部分放在函数show_hide_f()的末尾：

 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";
 }

你的全部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";
    }
}

此处也可以查看更改：http://jsfiddle.net/zh6hje9w/2/

Answer 2

最容易做到的就是在你的第一个{}

之后返回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
}

Answer 3

你可以使用一个小的JQuery函数，第一个在下面的代码中：

$("li").on("dblclick", function () {
    $(this).css("background","white");
    });

function show_hide_f(id) {
    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";
    }

    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";
    }
}

.MainMenu {
    position: relative;
}
.MainMenu ul {
    list-style-type: none;
    position: relative;
}
.MainMenu ul li {
    width: 100px;
    box-shadow: 4 4 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.dropshadow(offX=10, offY=10, color=rgba(0, 0, 0, 0.3));
    text-align: center;
    height: 45px;
    line-height:45px;
    margin-right: 10px;
    float: left;
    text-transform: uppercase;
    padding: 10px;
    background: white;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    border: 1px solid grey;
}
.MainMenu ul li:hover {
    box-shadow: -4 -4 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.3);
    filter: progid:DXImageTransform.Microsoft.dropshadow(offX=10, offY=10, color=rgba(0, 0, 0, 0.3));
    background: white;
}
.MainMenu ul li a {
    color: black !important;
    text-decoration: none;
    border: none;
    text-align: center;
}
.MainMenu ul li a:hover {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainMenu">
    <ul>
        <li id="personalLI"><a onclick="show_hide_f('personal')">Personal</a>

        </li>
        <li id="postLI"><a onclick="show_hide_f('post')">Post</a>

        </li>
        <li id="webLI"><a onclick="show_hide_f('web')">Web</a>

        </li>
    </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<div id="web" style="display: none">Web</div>
<div id="personal" style="display: none">Personal</div>
<div id="post" style="display: none">Post</div>

更改背景onclick两次

3 个答案: