Question

我正在开发一个使用标签的Web应用程序。我运行了一个似乎很小的问题，但我找不到解决方案，我担心这会导致我的代码出现更大的问题。

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

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 */

对于我的元数据页面，我希望它包含有关我向用户提供的数据集的信息。理想情况下，它会有一个目录，其中包含指向正确条目的锚链接。但是，当我实现锚链接时，如下所示：

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

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

这是一张简单的imgur专辑，展示了会发生什么：http://imgur.com/a/JCnlH

点击第一张图片中的链接后，您就会被发送到该页面。但是，即使向上滚动，页面的标签栏和导航栏也会完全消失。我不知道为什么会这样。

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

锚链接我做错了什么？

Answer 1

回答你的第一个问题：

您应该将所有JavaScript放在主页中，而不是放在partials中。这不被认为是JavaScript的最佳做法，因为这意味着您必须eval()内容，并且通常在您不需要时开始这样做，然后您做错了。

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

此外，当您使用ContentPane时，您应该使用适当的设置器向其添加内容/ 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%属性交互的互动引起的。我没有意识到overflow: hidden属性已设置，因为它是我正在使用的框架的一部分。通过更改溢出属性，我已经能够实现所需的行为。

Dojo Tabs - 使用HTML / JS＆amp; amp;锚链接

2 个答案: