Question

我正在为我在学校的一个班级创建一个网站。

我希望设置网站，使其看起来不像重新加载。

通过在查询中执行页面：?page=index。我通过淡入Div来执行此操作，具体取决于查询。我知道页面实际上是重新加载的，但它看起来不像是没有重新加载淡入淡出。您可以在此处查看我的网站：http://yolatools.yolasite.com/resources/project.html?page=index

现在唯一的问题是，当我?page=fcduj时，它会假设显示未找到DIV的页面。

我的代码是：

function load(){
  var profile=location.search;
  if(profile=="?page=index") 
  {
    $('.section, #home').fadeIn(1500);
    $('.i').addClass('active');
    $('.a, .m').addClass('grey');
  }
  else if(profile=="?page=about")
  {
    $('.section, #about').fadeIn(1500);
    $('.a').addClass('active');
    $('.m, .i').addClass('grey');
  }
  else if(profile=="?page=more"){
    $('.section, #more').fadeIn(1500);
    $('.m').addClass('active');
    $('.a, .i').addClass('grey');
  }
  else if(profile==="")
  {
    location.href = '?page=index';
  }
  if(profile !== '?page=index' && profile !== '?page=about'  && profile !== '?page=more') {
    var rsts = profile.substr(6);
    $('#query').html(rsts);
    $('#wrong').fadeIn(1500);
  }
}

我在onload标记中使用body启动此功能。

假设使页面未找到DIV显示的部分是：

if(profile !== '?page=index' && profile !== '?page=about'  && profile !== '?page=more') {
  var rsts = profile.substr(6);
  $('#query').html(rsts);
  $('#wrong').fadeIn(1500);
}

但它似乎没有起作用，但我不知道为什么。对于?page=index我不想使用PHP，即使它通常与PHP一起使用。提前谢谢。

Answer 1

显示#wrong div，但未显示父.section div。

将if语句更改为：

if(profile !== '?page=index' && profile !== '?page=about'  && profile !== '?page=more') {
  var rsts = profile.substr(6);
  $('#query').html(rsts);
  $('.section, #wrong').fadeIn(1500);
}

Answer 2

创建一个自定义404错误页面，其中包含所需的JS

Answer 3

用这个替换你的javascript：

function home(){

$('#home').fadeIn(1000);

$('#about, #more').fadeOut(10);

}

function about(){

$('#about').fadeIn(1000);

$('#home, #more').fadeOut(100);

}

function more(){

$('#more').fadeIn(1000);

$('#about, #home').fadeOut(100);

}

function menu(){$('#h1').fadeIn(1000);setTimeout('other()',1000)}

function other(){

$('#h3').fadeIn(500);

setTimeout('$("#menu").fadeIn(500);', 500)

}

function load(){

var profile=location.search;
if(profile=="?page=index")

{

$('.section, #home').fadeIn(1500);setTimeout('menu()', 1500)

}

else if(profile=="?page=about")

{

$('.section, #about').fadeIn(1500);setTimeout('menu()', 1500)

}

else if(profile=="?page=more"){

$('.section, #more').fadeIn(1500);setTimeout('menu()', 1500)

}

else if(profile==="")

{

location.href = '?page=index';

}



else {

var rsts = profile.substr(6);

$('#query').html(rsts);

$('#wrong,#articles').fadeIn(1500);

$('#about, #more, #home').hide();

}



}

获取URL的查询部分并对其执行操作

3 个答案: