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 tabs插件

更新。这是选项卡的基本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;}

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

3 个答案: