Web-Codes

Всем привет!

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

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

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

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

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

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

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

Не то это(

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

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

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

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

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

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

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

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>

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

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

Web-Codes

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

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

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

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

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

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

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

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

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

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

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