CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Cubic Compass
Cubic Compass

Reputation: 205

Using JQuery Tabs as Main Navigation

A JQuery UI Tab that inherits from a JQuery Theme and redirects (HTTP GET) to a new page is the goal.

I'm 90% there using the following code, but the compromise has been to put the target URL in the anchor TITLE (the Tab widget expects the HREF to be a local page selector).

This works, but for SEO purposes I'd like the HREFs to be actual URLs to ensure search engines will follow and index them.

Thoughts?

<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>

Upvotes: 1

Views: 2953

Answers (2)

SolutionYogi
SolutionYogi

Reputation: 32233

If you make sure that you follow certain HTML structure, you can do something like,

<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>

If your HTML structure looks like this, you can do:

<script>
$(function() {

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

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

Now, search engine will see those links where as user will see your regular tab behavior.

Upvotes: 3

Andy Chase
Andy Chase

Reputation: 1368

I'm confused as to why this must be done through jquery. If you just want a Http Get redirect, that's what <a href=""> tages were designed to do.

Upvotes: 1

Related Questions