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

Целью является вкладка пользовательского интерфейса 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>

javascript jquery jquery-ui
person Cubic Compass    schedule 14.07.2009    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если вы убедитесь, что следуете определенной структуре 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>

Теперь поисковая система увидит те ссылки, где пользователь увидит ваше обычное поведение вкладок.

person SolutionYogi    schedule 14.07.2009
comment
Да... Я вижу, в каком направлении ты идешь. Позвольте сканеру найти нужные href, но динамически перезапишите их перед привязкой вкладок. Спасибо. Я попробую! - person Cubic Compass; 14.07.2009
comment
Да, это идея. Если у вас возникнут проблемы, отпишитесь. Удачи. - person SolutionYogi; 14.07.2009

arrow_upward
1
arrow_downward

Я не понимаю, почему это нужно делать через jquery. Если вам просто нужна переадресация Http Get, для этого были разработаны теги <a href="">.

person Andy Chase    schedule 14.07.2009
comment
Я не верю, что они хотят использовать HTTP GET. Они хотят использовать настоящие ссылки внутри тегов href, но пользовательский интерфейс JQ требует, чтобы они были связаны с контентом. - person Ian Elliott; 14.07.2009
comment
Автор хочет использовать jQuery для навигации на основе вкладок (удобный для пользователя), а также предоставлять фактические ссылки, чтобы поисковая система могла индексировать контент. - person SolutionYogi; 14.07.2009
comment
В первую очередь я хочу унаследовать тему пользовательского интерфейса JQuery, чтобы навигация верхнего уровня соответствовала другим элементам пользовательского интерфейса. - person Cubic Compass; 14.07.2009