使用 jQuery 选项卡作为站点导航器？

Question

我想使用 jQuery 选项卡作为导航器，即选项卡实际上不应包含任何内容，但相反，当用户单击所有其他选项卡然后单击当前选项卡时，它应该导航到另一个页面。

另外，当到达该页面时，我希望第二个选项卡在加载时应该可见。

示例：

Page1.aspx：

    Page1    |    Page2    |    Page3    |    Page4
Page1 content|    blank    |    blank    |    blank

第 2、3 和 4 页的选项卡标题应该只是指向相应页面的链接。

Page2.aspx：

    Page1    |    Page2    |    Page3    |    Page4
    blank    |Page2 content|    blank    |    blank

第 1、3 和 4 页的选项卡标题应该只是指向相应页面的链接。

等等。

我想将选项卡寻呼机放置在母版页中，然后在每个页面各自的选项卡中填写内容，并将其他选项卡留空。

Answer 1

你确定不想要这样的东西吗：

<ul>
    <li><a href="somepage1.aspx" class="selected">Link 1</a></li>
    <li><a href="somepage2.aspx">Link 2</a></li>
    <li><a href="somepage3.aspx">Link 3</a></li>
    <li><a href="somepage4.aspx">Link 4</a></li>
</ul>
<div id="content1">
    <p>Some content for page 1</p>
</div>

我不明白你使用 jQuery 的目的是什么？...

Answer 2

jQuery 支持通过 ajax 加载内容，只需将 A 链接指向 url 而不是 div id 即可。 但据我所知，没有办法真正让它转到另一个页面。 您可能最好只使用选项卡的现有 css 定义，而不使用 ui 选项卡插件

UPDATE。 这是选项卡的基本 html/css 模型。 您将需要下载 jquery ui 的副本，以便获得 CSS 和图像，但这是制作选项卡的骨架。

<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected"><a href="/">Home</a></li>
    <li class="ui-tabs-nav-item"><a href="/somepage.html">Some Page</a></li>
</ul>

Answer 3

受到 Mark 的回答的启发，经过一些尝试和错误并深入研究 jQuery UI CSS 文件，我得到了以下内容，可以使用 jQuery UI 自己的样式进行工作。

<div id = "nav-bar" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class = "ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Current Tab</li>
    <li class = "ui-state-default ui-corner-top"><a href="/some_page">To Some Page</a></li>
  </ul>
</div>

然后在另一个CSS文件中添加这个

#nav-bar.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding: .5em 1em !important;}