Как организовать панель дополнительное инфо?

[To4kacool]

Всем привет!
Пыталась разобраться сама, но у меня мало чего получилось.

Я хочу вот что.

Как организовать переключатель ?



То что находится внутри переключателя я сделаю сама. А вот как организовать сам переключатель ,понять не могу (

Помогите кто сможет.. желательно готовым кодом.

[SOKOJI]

To4kacool, выкладывали уже. В архиве поищи. Ключевое слово - "табы". Там и красивые эффекты можно сделать при переключении с одной вкладки, на другую.

[To4kacool]

Спасибо! А то весь форум облазила , а не нашла

[To4kacool]

Не то это(

[SOKOJI]

To4kacool, viewtopic.php?f=3&t=1348 - вот эти вкладки получше будут.

[To4kacool]

Я нашла получше...http://dmitro-off.ru/css-javascript-tab#codesyntax2 но не понимаю как это все совместить что бы работало.

[SOKOJI]

To4kacool, что именно совместить? Там же весь листинг кода представлен. Тебе остается лишь свою информацию подставить.

[To4kacool]

SOKOJI, ну вообщем загрузила на сайт 2 документа. tabs.css(http://photoshop-free.ru/tabs/tabs.css) и tabs.js( http://photoshop-free.ru/tabs/tabs.js ) соответственно как написано на сайте. Подключаю ксс и скрипт...
в head

Код: Выделить всё

<script type="text/javascript" src="/tabs/tabs.js"></script>

и в ксс.

Код: Выделить всё

<style type="text/css" media="all">
@import url(/tabs/tabs.css);
</style>

а они у меня не пашут... не понимаю в общем.
http://photoshop-free.ru/index/0-52

[SOKOJI]

To4kacool, прости, но что именно у тебя не пашет? Какой у тебя браузер? Лично у меня все вкладки нормально работают. Советую немного в исходном коде поработать, ошибки исправить. Вот, к примеру:

Код: Выделить всё

<style type="text/css" media="all">
@import url(/style/engine.css);
<style type="text/css" media="all">
</style>

Рекомендуется объединять все css файлы в 1, максимум 2 файла, для наиболее быстрой загрузки страницы.

[Draft]

To4kacool,

Держи:

<style>
.tabc {display:none;}
.tabt {float:left; width:100px; margin-right:10px; border:1px #C8C8C8 solid; padding:2px;}
</style>

<div class="tabs">

<div class="tabt" onclick="toggle_tab(1)">Вкладка 1</div>
<div class="tabt" onclick="toggle_tab(2)">Вкладка 2</div>
<div class="tabt" onclick="toggle_tab(3)">Вкладка 2</div>

<br clear="both">

<div class="tabc" id="toggle_tab_1">Содержимое 1</div>
<div class="tabc" id="toggle_tab_2">Содержимое 2</div>
<div class="tabc" id="toggle_tab_3">Содержимое 2</div>

</div>

<script>
function toggle_tab(n) {
$(".tabs .tabc").fadeOut(function() {
setTimeout(function() {$("#toggle_tab_"+n).fadeIn();},400);
});}
</script>

Остается только застилить кнопки и содержимое по своему вкусу.

С Наступающим