CSS HTML: горизонтальные вкладки

Question

У меня есть HTML и CSS, которые в основном делают то, что я пытаюсь достичь. Скрипка здесь: http://jsfiddle.net/8YX7M/.

Мне очень хотелось бы, чтобы граница страницы была прикреплена к вкладкам так, чтобы выбранная вкладка была просто расширением страницы, а все невыбранные вкладки имеют черную линию под ними, показывая, что они не являются расширением текущая страница. Кроме того, мне интересно, как один идет о показе контента под набором вкладок. Используете ли вы что-то вроде рамки для загрузки нового контента, выбранного на вкладке, или создаете новую страницу каждой возможной вкладки и загружаете все это.

Любые советы приветствуются.

С уважением.

Answer 1

Попробуйте использовать http://jqueryui.com/demos/tabs/ и переустановите его, закрепив классы, которые вы получаете бесплатно.

Answer 2

jsFiddle demo

добавил:

.tablist li a{ 
    boder-bottom:1px solid #000; 
} 

.tablist li a.active{ 
    border-bottom:1px solid #fff; 
    background:#fff;  
} 

и класс active к a HTML элемента:

<li><a href="#Dashboard" class="active" ><strong>Tutorialsphere</strong></a></li>