Dojo 选项卡 - 使用 HTML/JS 和锚链接进行填充

Question

我正在开发一个使用选项卡的网络应用程序。我遇到了运行一个看起来很小的问题，但我一直无法找到解决方案，我担心这表明我的代码存在更大的问题。

我的应用程序有一个主页，其中包含一个带有多个内容窗格的选项卡容器，然后作为子项插入。我认为让每个内容窗格加载一个外部 HTML 文件并以这种方式加载它是一个很好的解决方案 - 它似乎提供了模块化设计并允许轻松更改单个选项卡的内容。我现在运行遇到的问题是，虽然一切都正确加载，但我无法在选项卡内或选项卡之间提供锚点 link。这是一些示例代码：

var tabs = new TabContainer({
    style: "height: 100%; width: 100%;" 
}, "tab-container");
tabs.startup();
var metadata = new ContentPane({
    title: "Metadata",
    id: "Metadata"
});
/* repeat for the non-metadata content panes */
request.get("/js/viewer/templates/splash.html").then(function (results) {
    splash.set("content", results);
});
/* repeat for each pane */

对于我的元数据页面，我希望它包含有关我提供给用户的数据集的信息。理想情况下，它应该有一个 table 的内容，锚点 link 指向正确的条目。但是，当我实现锚点 link 时，像这样：

<a href="#test">Click me to jump down the page!</a>
<!-- some content here -->
<div id="test">We made it!</div>

link 是可点击的，它确实会将您带到正确的位置，但它似乎总是将其加载到一个新框架中，如果用户想做任何事情，则需要重新加载页面别的。我试过使用标签属性，但无济于事。我也希望能够在选项卡之间 link（例如，如果用户正在查询我提供给他们的查询页面之一，然后想知道数据集来自哪里或其他信息）。

这是一个简单的 imgur 相册，展示了发生的事情：http://imgur.com/a/JCnlH

点击第一张图片中的 link 后，您将转到页面下方。但是，页面的选项卡栏和导航栏完全消失，即使您向上滚动也是如此。我不知道这是为什么。

所以，这是一个很长的问题，但这是它的核心：

我对锚 links 做错了什么？

Answer 1

回答你的第一个问题：

您应该将所有 JavaScript 都放在主页中，而不是局部页面中。这不被认为是 JavaScript 的最佳做法，因为这意味着您将不得不 eval() 内容，并且通常当您在不需要时开始这样做，那么您做错了什么。

在这种情况下，您可以轻松地将所有 JavaScript 代码添加到主页。如果您需要等待打开或加载特定选项卡，可以使用 dijit/layout/ContentPane 小部件上的 onShow 或 onLoad 事件。

此外，当您使用 ContentPane 时，您应该使用适当的设置器向其添加 content/HTML。

而不是做：

request.get("/js/viewer/templates/splash.html").then(function (results) {
     dojo.byId("Splash").innerHTML = results;
});

你应该做的：

request.get("/js/viewer/templates/splash.html").then(function (results) {
    splash.set("content", results);
});

或者如果您不再引用 splash 变量，您应该使用 registry.byId("splash").set("content", results).

关于超链接，我不知道。我没有得到相同的行为，所以你能进一步解释一下吗？

这是一个（据我所知）工作示例：http://jsfiddle.net/n4515tsz/

Answer 2

在我的例子中，此行为似乎是由我网站主体的 overflow: hidden CSS 属性与 height: 100% [=16= 的交互引起的] 我的选项卡容器。我没有意识到 overflow: hidden 属性已设置，因为它是我使用的框架的一部分。通过更改溢出属性我已经能够实现所需的行为。

Dojo 选项卡 - 使用 HTML/JS 和锚链接进行填充

Dojo Tabs - Populating w/ HTML/JS & Anchor links

hyperlink

tabs

dojo

tabcontainer