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