Question

我花了大约4到5个小时在这个网站和其他人上查看类似的问题，并且可以看到它是一个最喜欢的问题：但我无法找到特定于加载的代码 - 比如50个不同的php文件供查看 - 一个主要的div。线性分页不是目标。

在侧边栏div中，我有一个指向书籍章节的html链接列表（单独的php文件）。

使用id我给每个章节/ Topic / Subtopic作为ajax jquery的选择器（绝对是所有这些中的初学者）！以下是我对第一部分的实验。

<ul id="tocsub">
<li>
<h2>Section One</h2>
<ul>
<li><a href="#" id="ChI" name="ChI">Chapter I</a>
<ul>
<li><a href="#" id="T1" name="T1">Topic 1</a>
<ul>
<li><a href="#" id="Suba" name="Suba">Sub a</a></li>
<li><a href="#" id="Subb" name="Subb">Sub b</a></li>
</ul>
</li>
<li><a href="#">Topic 2</a></li>
</ul>
</li>
<li><a href="#">Chapter II</a></li>
<li><a href="#">Chapter III</a></li>
</ul>
</li>

我想在点击任何上述链接的主div中交换这些章节/ etc。到目前为止，我使用下面的脚本来回复上述链接。

<script>
$(document).ready(function(){
  $("#ChI").click(function(){
    $("#posts").load("chapters/ChI.php");
  });
});
$(document).ready(function(){
  $("#T1").click(function(){
    $("#posts").load("chapters/T1.php");
  });
});
$(document).ready(function(){
  $("#Suba").click(function(){
    $("#posts").load("chapters/Suba.php");
  });
});
$(document).ready(function(){
  $("#Subb").click(function(){
    $("#posts").load("chapters/Subb.php");
  });
});
</script>

这似乎达到了这一点。我想知道：

1）这个标题是否正常？脚本可以压缩吗？ 2）将脚本扩展为包含多达50个不同的id（书的内容）是否可以？

如果您能够提供帮助，请提前致以诚挚问候，谢谢您的回复！

经过一番研究后，我决定：

sample link:
<li><a href="#ChI" id="ChI">Chapter I</a>

sample script:    
<script>
$(document).ready(function(){
  $("#ChI").click(function(){$("#posts").load("chapters/ChI.php")});
  $("#T1").click(function(){$("#posts").load("chapters/T1.php")});
  $("#Suba").click(function(){$("#posts").load("chapters/Suba.php")});
  $("#Subb").click(function(){$("#posts").load("chapters/Subb.php")});
});
</script>

Answer 1

在此阶段，您显然知道pagination，您应该专注于使用新链接重新加载页面。

查看分页。

Answer 2

我看到你有4个选项：

链接到每个单独的文件（可能不是最好的）
使用其他参数重新加载页面，并使用您想要的特定页面加载内容div
将所有页面加载到不同的div中，并隐藏那些不应该看到的页面
通过ajax刷新div内容

我不确定这里是否有首选方法，因为它们都有其优点和缺点。

加载每个单独的文件，我会说它的oldschool，你必须在每个文件中实现pade布局（除了使用页眉和页脚文件时）
重新加载页面可确保没有javascript的人可以使用该网站
所有不同div的页面从一开始就加载所有内容（页面加载速度较慢），但切换到新页面时速度更快
使用ajax刷新div可能是最快的解决方案（技术上）。第一页打开速度最快，单个页面加载时间不长。

重新加载整个页面或通过ajax刷新将是我个人的首选选项。但我认为它总是出现在他最喜欢的开发者身上。

单击侧栏链接以更改主div中的内容

2 个答案: