两次更改背景onclick

Question

I have three boxes. When I click on any box, the corresponding div is displaying and the background color becomes red. But when I click on the same box twice, the div is disappearing, but the background stays the same (it should become white). Help me please.

Here is my jsfiddle.

Answer 1

Just a little thing:

put this part at the end of your function 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";
 }

YOUR FULL JS UPDATED:

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

See changes here too : http://jsfiddle.net/zh6hje9w/2/

Answer 2

Easiest to do would be return false after your first else {}

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

You could use a small JQuery function, the first on the below code:

 $("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>