Question

I am creating a new layout design for a site. In the header there is a tab design that I would like to render different partials in a specific div. For example

<div class="pages">
<div id ="pages_header">
<div class="menu>
<ul>
<li>Tab1</li> (click to render partial)
</ul>    
</div>
</div>  

<div id="side_bar">

</div>

<div id="pages_content">
    <div class="content">
        <RENDER PARTIAL HERE>
        </div>
    </div>  

</div>

Here when you clicked Tab1 it would render a partial inside “pages_content”

I can see there are many ways to do this… for example I can use Bettertabs or http://www.simonecarletti.com/code/tabs_on_rails/

However what is the best way to do this, so that I can provide external URL’s that will render the correct partial in the right place, along with changing the title of the page to help with SEO. For example http://www.mysite.com/products/view/product_1 (would link to product_1 partial inside the div “pages_content”). Ideally – it would be fantastic to load these partials using AJAX so they could animate? And with the tabs being highlighted as active.

Would be really interesting to hear what everyone views are on this, as I said I can see multiple ways to do this – would just be good to do the best one! Especially for SEO.

Update:
Would link_to_remote or content_for be useful?

Answer 1

In the end i actually used Jquery tools… which is a great Javascript library that allows anchored links in tabs.