jquery如果可見條件不工作

Question

我有一個頁面去這裏使用jQuery：http://treethink.com/services 我想要做的是，如果幻燈片或子頁面顯示在那裏，更改背景顏色和按鈕的顏色。

爲此，我試過說，如果顯示某個div，某個按鈕的背景顏色會發生變化。但是，您可以在那裏看到它無法正常工作，它會更改網頁的顏色，但不會在更改頁面時刪除顏色更改並在不同的按鈕上添加顏色更改。

這裏是整個代碼：

/* 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"); 

} 

感謝，

韋德

Answer 1

你if語句只執行一次。當您切換頁面時，if語句不會再次運行，因此沒有任何更改。

您需要將if語句放入函數中，然後在切換頁面之後立即調用該函數。

---

順便說一句，你可以用一個css電話設置多個屬性，就像這樣：

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

Answer 2

感謝SLaks，你的建議的工作，但由於某種原因，它不會讓我重新設置CSS懸停。當div的按鈕回到不活動狀態時，它不會懸停。

/*隱藏所有的頁面，除了網絡*/

$("#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"}); 

    } 

} 

Answer 3

對不起，這是稍微無關，但你可以通過簡化您的代碼，節省了大量的：

您的版本：

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

    } 

簡化版本：

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

他們應該工作一樣。就這樣。