Javascript和Wordpress頁面加載

Question

我正在網站techhouse.ng上工作。 我的問題是，當單擊菜單li鏈接（服務和聯系人）時，我有一個javascript會更改某些div的寬度和顏色。 該腳本可以正常工作，但是問題在於，在頁面加載時，div會恢復為默認設置。

我為這些鏈接創建了page-service.php和page-contact.php。 但是腳本可以在index.php上運行，因此，當您單擊服務鏈接或聯系人鏈接時，腳本可以運行，但是在頁面加載時，div會恢復為原始的CSS值。

 jQuery(document).ready(function ($) {

 $("#li-12").click(function () {
 $("#rcolumn").css("width", '25%');
$("#rcolumn").css("background-color", 'rgb(44, 62, 80)');
$(".wrapper").css("background-color", 'rgb(44, 62, 80)');
$(".nav li a").css("padding", '15px 0');
$(".nav li a").css("color", '#909090');
$(".nav li a").css("background", 'white');
$("#lcolumn").css("width", '75%');
$(".nav").css("width", '75%');
});

$("#li-13").click(function () {
$("#rcolumn").css("width", '25%');
$("#rcolumn").css("background-color", 'rgb(44, 62, 80)');
$(".wrapper").css("background-color", 'rgb(44, 62, 80)');
$(".nav li a").css("padding", '15px 0');
$(".nav li a").css("color", '#909090');
$(".nav li a").css("background", 'white');
$("#lcolumn").css("width", '75%');
$(".nav").css("width", '75%');
}); 

});

Answer 1

首先，您可以像這樣組合多個選擇器： $("#li-12, #li-13")這樣您就可以刪除很多重復的代碼。

其次，要在這兩個頁面上進行樣式設置，您可以將.css內容放入一個命名函數中並對其進行調用……雖然這遠非理想，因為它必須等到jquery框架加載完畢，這意味着用戶將首先請參閱默認樣式，直到jQuery啟動為止。這可以使用純JavaScript來完成，這將盡快啟動。 最好將樣式標簽放在這兩個模板上，以覆蓋默認樣式。 或使用類做事情。

但是，如果您不介意延遲，可以執行以下操作：

jQuery(function($) { //.ready

  function altStyling() {
    $("#rcolumn").css("width", '25%');
    $("#rcolumn, .wrapper").css("background-color", 'rgb(44, 62, 80)');
    $(".nav li a").css("padding", '15px 0');
    $(".nav li a").css("color", '#909090');
    $(".nav li a").css("background", 'white');
    $("#lcolumn, .nav").css("width", '75%');
  }

  // click menu items
  $("#li-12, #li-13").click(altStyling);

  // call if we're on services or contact page
  if (location.pathname == "/services/" || location.pathname == "/contact/") altStyling();
});