Using JQuery Tabs as Main Navigation

Question

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>

Answer 1

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.

Answer 2

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.