Использование вкладок JQuery в качестве главной навигации

Question

Цель - вкладка пользовательского интерфейса JQuery, которая наследуется от темы JQuery и перенаправляет (HTTP GET) на новую страницу.

Я на 90% использую следующий код, но компромисс был в том, чтобы поместить целевой URL в привязку TITLE (виджет 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>

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=""> теги.