Question

我在网站techhouse.ng上工作。我的问题是，当点击菜单li链接（服务和联系人）时，我有一个更改某些div的宽度和颜色的javascript。该脚本工作正常，但问题是，当页面加载时，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();
});

Javascript和wordpress页面加载

1 个答案: