Question

我正在构建一个用于圣经学习的网络应用程序，并且遇到了试图改变显示/导航的问题。作为参考，该网站是www.jbtbible.com。

目前，您可以打开1到4个阅读窗格，每个窗格将显示给定书籍的单个章节，因此选择给定章节或单击按钮以前进或后退章节将加载相应的html文件到给定的div并显示该章节。这需要更改为将整本书加载到div中，然后从下拉列表中选择章节将简单地链接到加载文档中的该章节（允许在单个书籍的章节之间滚动而不必在它们之间导航）。

我遇到的问题是，每个加载的div中都会显示相同的ID（例如＆＃34; chapter1＆＃34;，＆＃34; chapter2＆＃34;等）。如何控制哪个div将链接到正确的章节而不影响其他div中任何其他已加载的书籍/章节？

我也试过在我为移动设备构建的单一窗格版本上玩这个版本，当我尝试从下拉列表中选择一个章节时，它试图从外部链接出于某种原因，即使我指向href =＆＃34;＃1章＆＃34;

Answer 1

如果在文档中多次重复使用相同的ID，那么这是无效的标记，并且行为将是未定义的并且是特定于浏览器的。由于您多次将文档的相同段加载到DOM中，我建议将ID切换为类。

即使我指向href =“chapter1”
，它也会出于某种原因尝试外部链接

那是因为href="chapter1"是指向名为chapter1的外部资源的链接。要链接到当前文档中的锚点，请在其前面添加#：

href="#chapter1"

在这种情况下，chapter1应该是目标主播的name，而不是id的{{1}}或类似内容。例如：

div

有关锚标记的更多信息，请here。

Answer 2

如果它们在同一页面上重复，您应该使用类而不是ID。您可能需要以下内容：

<div id="chapter1" class="chapter">
  <div class="readingpane" id="readingpane-chapter1"></div>
  <div class="navpane" id="navpane-chapter1"></div>
</div>

<div id="chapter2" class="chapter">
  <div class="readingpane" id="readingpane-chapter2"></div>
  <div class="navpane" id="navpane-chapter2"></div>
</div>

然后你可以用这样的东西来管理它们

$('.navpane').click(function(){
  var currentReadingPane = $(this).closest('.chapter').find('.readingpane');
});

OR

$('.navpane').click(function(){
  var currentId = $(this).attr('id');
  //....
});

链接到div中的锚点

2 个答案: