Я использовал панели с вкладками в нескольких недавних проектах, и я использовал следующее решение:
HTML
<ul class="tabs">
<li><a href="#en_en">English</a></li>
<li><a href="#fr_fr">Français</a></li>
</ul>
<div class="panel" id="en_en"><!-- Content --></div>
<div class="panel" id="fr_fr"><!-- Content --></div>
JQuery
// the currently selected tab, or a default tab (don't forget to prepend the #)
var tab = location.hash || '#en_en';
// register a click handler on all the tabs
$('ul.tabs a').click(function(event){
event.preventDefault(); // prevents the browser from scrolling to the anchor
// hide all panels, then use the link's href attribute to find
// the matching panel, and make it visible
// you can, of course, use whatever animation you like
$('div.panel').hide().filter( $(this).attr('href') ).show();
).filter('[href*='+tab+']').click();
// above: in case of refreshing/bookmarking: find the tab link that contains
// the current location.hash, and fire its click handler
Он работает хорошо, потому что серверному коду не нужно знать, какая вкладка выбрана, но он также поддерживает обновление или добавление в закладки конкретной вкладки, не требуя от пользователя повторного выбора вкладки.