Jquery if visible conditional funktioniert nicht

Question

Ich habe hier eine Seite, die jQuery verwendet: http://treethink.com/services Was ich versuche, ist, die Hintergrundfarbe und die Farbe der Schaltfläche zu ändern, wenn dort eine Folie oder eine Unterseite angezeigt wird.

Dazu habe ich versucht zu sagen, dass sich die Hintergrundfarbe einer bestimmten Schaltfläche ändert, wenn ein bestimmtes Div angezeigt wird. Sie können jedoch sehen, dass es nicht richtig funktioniert, es ändert die Farbe für das Web ein, aber nicht die Farbänderung zu entfernen und eine Farbänderung auf eine andere Schaltfläche hinzufügen, wenn Sie Seiten ändern.

Hier ist der Gesamtcode:

/* Hide all pages except for web */

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();

}); 

/* If buttons are active, disable hovering */

if ($('#services #web-block').is(":visible")) { 

    $("#services #web-button").css("background", "#444444");
    $("#services #web-button").css("color", "#999999");

}

if ($('#services #print-block').is(":visible")) { 

    $("#services #print-button").css("background", "#444444");
    $("#services #print-button").css("color", "#999999");

}

if ($('#services #branding-block').is(":visible")) { 

    $("#services #branding-button").css("background", "#444444");
    $("#services #branding-button").css("color", "#999999");

}

Danke,

Wade

Answer 1

Es tut mir leid, dass dies nichts mit dem Thema zu tun hat, aber Sie könnten eine Menge sparen, wenn Sie Ihren Code vereinfachen würden:

Ihre Version:

if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css("background", "#444444");
        $("#services #web-button").css("color", "#999999");

    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css("background", "#000000");
        $("#services #web-button").css("color", "#999999");
        $("#services #web-button:hover").css("background", "#666666");
        $("#services #web-button:hover").css("color", "#ffffff");

    } 

Einfachere Version:

if ($('#services #web-block').is(":visible")) { 
        $("#services #web-button").css({"background":"#444444"), "color":"#999999"});
    } else { 
        $("#services #web-button").css({ "background":"#000000", "color":"#999999" });
        $("#services #web-button:hover").css({ "background":"#666666", "color":"#ffffff" });
    } 

Sie sollten auch so funktionieren. Das ist alles.

Answer 2

Ihr if Anweisungen werden nur einmal ausgeführt. Wenn Sie die Seite wechseln, wird die if Anweisungen werden nicht erneut ausgeführt, es ändert sich also nichts.

Sie müssen die if Anweisungen in einer Funktion und rufen Sie dann die Funktion sowohl sofort als auch nach dem Seitenwechsel auf.

---

Übrigens können Sie mehrere Eigenschaften mit einer einzigen css Anruf, etwa so:

$("#services #print-button").css({
    background: "#444444",
    color: "#999999"
});

Answer 3

Danke SLaks, dein Vorschlag hat funktioniert, aber aus irgendeinem Grund lässt es mich die css hovers nicht zurücksetzen. Wenn die div-Schaltfläche geht zurück zu nicht aktiv es wird nicht schweben noch.

/* Alle Seiten außer Web ausblenden */

$("#services #web-block").show();
$("#services #print-block").hide();
$("#services #branding-block").hide();
activeButton();

/* When a button is clicked, show that page and hide others */

$("#services #web-button").click(function() {

    $("#services #web-block").show();
    $("#services #print-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #print-button").click(function() {

    $("#services #print-block").show();
    $("#services #web-block").hide();
    $("#services #branding-block").hide();
    activeButton();

});

$("#services #branding-button").click(function() {

    $("#services #branding-block").show();
    $("#services #web-block").hide();
    $("#services #print-block").hide();
    activeButton();

}); 

/* If buttons are active, disable hovering */

function activeButton() {

    if ($('#services #web-block').is(":visible")) { 

        $("#services #web-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #web-block').is(":hidden")) { 

        $("#services #web-button").css({background: "#000000", color: "#999999"});
        $("#services #web-button:hover").css({background: "#666666", color: "#ffffff"});

    } 

    if ($('#services #print-block').is(":visible")) { 

        $("#services #print-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #print-block').is(":hidden")) { 

        $("#services #print-button").css({background: "#000000", color: "#999999"});
        $("#services #print-button:hover").css({background: "#666666", color: "#ffffff"});

    }

    if ($('#services #branding-block').is(":visible")) { 

        $("#services #branding-button").css({background: "#444444", color: "#999999"});

    } else if ($('#services #branding-block').is(":hidden")) { 

        $("#services #branding-button").css({background: "#000000", color: "#999999"});
        $("#services #branding-button:hover").css({background: "#666666", color: "#ffffff"});

    }

}