Question

JQuery UI选项卡继承自JQuery主题并将目标重定向（HTTP GET）到新页面。

我90％使用以下代码，但妥协的是将目标URL放在锚TITLE中（Tab小部件希望HREF成为本地页面选择器）。

这是有效的，但出于搜索引擎优化的目的，我希望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>

Answer 1

如果您确定遵循某种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>

现在，搜索引擎会看到那些用户将看到常规标签行为的链接。

Answer 2

我很困惑为什么必须通过jquery来完成。如果您只是想要一个Http Get重定向，那就是<a href=""> tages的目的。

使用JQuery选项卡作为主导航

2 个答案: