Question

使用jQuery的UI选项卡。这是我的代码。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Find a Category</a></li>
    <li><a href="#tabs-2">Business Name</a></li>
    <li><a href="#tabs-3">All Categories</a></li>
    <li><a href="#tabs-4">Business to Business</a></li>
  </ul>
  <div style="clear:both;"></div>
  <div id="tabs-1"><p>Tab 1</p></div>
    <div id="tabs-2"><p>Tab 2</p></div>
    <div id="tabs-3"><p>Tab 3</p></div>
    <div id="tabs-4"><p>Tab 4</p></div>
    </div>
</div>

像这样开始......

$(function() {
    $('#tabs').tabs();
});

在我网站的某些页面上，它完美无缺。在其他网页上，href="#tabs-x"前面加上了网页的路径，例如<a href="#tabs-1">Find a Category</a>变为<a href="/page/path/#tabs-1">Find a Category</a>（在这种情况下，页面将在/ page / path /中找到。）当发生这种情况时，它认为它需要使用Ajax并最终将页面重新加载到选项卡中。

真正奇怪的是它不会发生在每一页上（虽然它确实发生在大多数页面上）。例如

http://cbpstage.eblairsolutions.net/online/all-categories/ - 效果很好 http://cbpstage.eblairsolutions.net/online/business-to-business/ - 失败。

我已经验证了这些页面（它们并不完美，但却以完全相同的方式失败）。我用IDM的ultracompare比较了它们。它们是不同的页面，因此存在一些差异，但我无法检测到任何导致href表现不同的材料。

我花了一整天的时间在这上面，只有一个秃顶的头来展示它。希望别人能够看到这个。

Answer 1

我最初的直觉反应是你正在构建你的标签DIV。我不知道后端语言/平台，但在ASP.NET中，您可以在构建URL引用时执行以下操作：

~/#tab-1

并且~将被解释为解析为根目录。因此，如果您的实际网页（不是您的路线）有几个级别，那么~会在该HREF的几个级别上附加。

我不是说这就是发生了什么，但这似乎正在发生。调查您的标签DIV的构建方式，如何将href添加到<a>标签，然后从那里开始。如果您可以使用这些信息更新您的问题，我会相应地更新我的答案。

希望这有帮助！

Answer 2

D Hoerster走在正确的轨道上。路径似乎来自服务器。要么跟踪它，要么在$('#tabs').tabs(...声明之前添加以下jQuery：

$('#tabs a').each(function(){
  $(this).attr('href',"#"+$(this).attr('href').split('#')[1]);
});

修改：添加了"#"+

Jquery选项卡在选项卡中加载当前URL

2 个答案: