Javascript 使用JQuery选项卡作为主导航

目标是从JQuery主题继承并重定向（HTTPGET）到新页面的jQueryUI选项卡

我90%是使用以下代码实现的，但折衷的办法是将目标URL放在锚标题中（Tab小部件希望HREF是本地页面选择器）

这是可行的，但出于SEO目的，我希望HREF是实际的URL，以确保搜索引擎将跟踪并索引它们

想法

<script>
    $(function () {
        $("#tabs").tabs();
        $(".nav-link")
            .click(function () {
                window.location = this.title;
            });
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="home.html" class="nav-link">Home</a></li>
        <li><a href="#tabs-2" title="contact.html" class="nav-link">Contact Us</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
</div>

$（函数（）{
$（“#制表符”）.tabs（）；
$（“.nav链接”）
。单击（函数（）{
window.location=this.title；
});
});

我不明白为什么必须通过jquery完成这项工作。如果您只是想要一个Http Get重定向，那么这就是

标记的设计目的。

我不明白为什么必须通过jquery来实现。如果您只需要Http Get重定向，这就是设计标记的目的。

如果您确保遵循特定的HTML结构，您可以执行以下操作：

<div id="tabs">
<ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="contact.html">Contact Us</a></li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>

如果您的HTML结构如下所示，您可以执行以下操作：

<script>
$(function() {

        var tabId = '#tabs';
        $(tabId + ' a').each(
            function(index, val)
            {
                $(this).attr('href', tabId + '-' + index);
            }
          );

        $("#tabs").tabs();
});
</script>

$（函数（）{
var tabId=“#tabs”；
$（tabId+a'）。每个(
函数（索引，val）
{
$（this.attr（'href'，tabId+'-'+索引）；
}
);
$（“#制表符”）.tabs（）；
});

---

现在，搜索引擎将看到这些链接，用户可以在其中看到您的常规选项卡行为。

如果您确保遵循特定的HTML结构，您可以执行以下操作：

<div id="tabs">
<ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="contact.html">Contact Us</a></li>
</ul>
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. -->
<div id="tabs-0"></div>
<div id="tabs-1"></div>
</div>

如果您的HTML结构如下所示，您可以执行以下操作：

<script>
$(function() {

        var tabId = '#tabs';
        $(tabId + ' a').each(
            function(index, val)
            {
                $(this).attr('href', tabId + '-' + index);
            }
          );

        $("#tabs").tabs();
});
</script>

$（函数（）{
var tabId=“#tabs”；
$（tabId+a'）。每个(
函数（索引，val）
{
$（this.attr（'href'，tabId+'-'+索引）；
}
);
$（“#制表符”）.tabs（）；
});

---

现在，搜索引擎将看到这些链接，用户可以在其中看到您的常规选项卡行为。

我不相信他们想使用HTTP GET。他们希望在href标签中使用真正的链接，但jqui要求它们与内容相关。作者希望使用jQuery进行基于标签的导航（用户友好），但也提供实际链接，以便搜索引擎可以索引内容。我主要希望继承JQuery UI主题，以便顶级导航与其他UI元素匹配。我不相信他们希望使用HTTP GET。他们希望在href标签中使用真正的链接，但jqui要求它们与内容相关。作者希望使用jQuery进行基于标签的导航（用户友好），但也提供实际的链接，以便搜索引擎可以索引内容。我主要希望继承JQuery UI主题，以便顶级导航与其他UI元素匹配。是的。。。我知道你要去的方向。让爬虫程序查找所需的href，但在绑定选项卡之前动态覆盖它们。谢谢我要试试这个！是的，就是这个想法。如果遇到问题，请发帖。祝你好运，是的。。。我知道你要去的方向。让爬虫程序查找所需的href，但在绑定选项卡之前动态覆盖它们。谢谢我要试试这个！是的，就是这个想法。如果遇到问题，一定要发回。祝你好运