Как сделать закладку для двух тем на одной странице

[bgraf]

Добрый день всем !!!

Скорее всего я не очень карректно описал в теме свой вопрос попробую здесь .

Я начинающий , так что просьба , если это возможно поподробнее .

Задача в следующем .

Я хочу сделать страничку на которой есть две вкладки при нажатии на одну вкладку информация первой стоновится не видимой и наоборот , не хочется делать это как меню и строить еще две строницы с содержимом вкладки . а хочется сделать все на одной странице .

Содержимое первой вкладки как в прочем и второй будут линки вот при нажатии на них я переду на другую страницу .

Спасибо всем за терпение и помощь

[s0rr0w]

Добрый день всем !!!

Скорее всего я не очень карректно описал в теме свой вопрос попробую здесь .

Я начинающий , так что просьба , если это возможно поподробнее .

Задача в следующем .

Я хочу сделать страничку на которой есть две вкладки при нажатии на одну вкладку информация первой стоновится не видимой и наоборот , не хочется делать это как меню и строить еще две строницы с содержимом вкладки . а хочется сделать все на одной странице .

Содержимое первой вкладки как в прочем и второй будут линки вот при нажатии на них я переду на другую страницу .

Спасибо всем за терпение и помощь

Попробуйте использовать StateController

Вот тут лежит пример, он правда чуть более продвинутый, но можно вырезать половину лишнего.

http://forum.htmlbook.ru/index.php?showtopic=12633

Сначала нарисуйте табы, так как вам хочется, потом я подскажу, что надо прописать, чтобы они заработали

[bgraf]

простите я ничего не понял , вы имеете ввиду картинки закладок сделать

[s0rr0w]

простите я ничего не понял , вы имеете ввиду картинки закладок сделать

Нет, код

Вам нужно будет сделать блок с переключателями табов и блок, где будет расположен контент табов.

Контент табов - это набор блоков.

Например вот так

<div class="tabSwitchContainer">
 <a href="#">Tab 1</a>
 <a href="#">Tab 2</a>
</div>
<div class="tabContentContainer">
 <div class="tabContent">
  Content 1
 </div>
 <div class="tabContent">
  Content 2
 </div>
</div>

[bgraf]

<div class="tabSwitchContainer">

<a id="a" href="#">Tab 1</a>

<a id="b" href="#">Tab 2</a>

</div>

<div class="tabContentContainer">

<div class="tabContent">

Boris

</div>

<div class="tabContent">

Vova

</div>

</div>

а теперь как я понимаю мне надо вызвать функцию javascript которая будет к примеру менять style display block на none вот тут плиз помогите мне все правельно написвть

[s0rr0w]

а теперь как я понимаю мне надо вызвать функцию javascript которая будет к примеру менять style display block на none вот тут плиз помогите мне все правельно написвть

Можно ничего не писать, все уже написано.

Скачайте вот отсюда файл

http://forum.htmlbook.ru/index.php?act=att...=post&id=40

Подключите lib.js, stateController.js, scHandlers.js, как в примере.

id для <a> можете убрать, это не обязательно, мы его в другом месте установим

Добавляем к каждому тегу вот такую конструкцию

SC="sc_apply_class_by_id:menu:1:active"

<a href="#" SC="sc_apply_class_by_id:activate:1:active">Tab 1</a>
<a href="#" SC="sc_apply_class_by_id:activate:2:active">Tab 2</a>

Расшифровываю

sc_apply_class_by_id - обработчик (находится в scHandlers.js)

activate - имя события

1 - идентификатор таба

active - имя класса, который будет присвоен при нажатии на данный таб

Добавляем каждому <div class="tabContent">

Вот такую конструкцию

SC="sc_show_content_by_id:menu:1

<div class="tabContent" SC="sc_show_content_by_id:activate:1">Boris</div>
<div class="tabContent" SC="sc_show_content_by_id:activate:2">Vova<div>

Теперь нужно оживить наши переключатели

Добавим <a> onclick="activateTab( 1 ); return false;"

<a href="#" onclick="activateTab( 1 ); return false;" SC="sc_apply_class_by_id:activate:1:active">Tab 1</a>
<a href="#" onclick="activateTab( 2 ); return false;" SC="sc_apply_class_by_id:activate:2:active">Tab 2</a>

Для нормальной работы нам необходими ID двух контейнеров - с переключалками и контейнерами

<div class="tabSwitchContainer" id="tabSwitchContainer">

и

<div class="tabContentContainer" id="tabContentContainer">

и добавляем js функцию

var activateTab = function( id ){

try {

GSC_setValAndLaunch( "activae", id, "tabSwitchContainer") // активизируем нужную переключалку таба

GSC_launch ( "tabContentContainer", "activate", { propagation: "childNodes"} ); // активируем нужный контейнер. Не лезем глубже чем дети контейнера

} catch ( e ) { return false }

}

И нужно теперь инициализировать первый пункт меню при загрузке

activateTab(1);

Вот что получилось всего

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>SC sample</title>
 <script type="text/javascript" src="StateController/lib.js"></script>

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

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

 <style type="text/css">
 	.hiddenBlock { display: none }

 	.active { font-weight: bold }
 </style>


<script type="text/javascript">

var activateTab = function( id ){
 try {
   GSC_setValAndLaunch( "activate", id, "tabSwitchContainer") // активизируем нужную переключалку таба
   GSC_launch ( "tabContentContainer", "activate", { propagation: "childNodes"} ); // активируем нужный контейнер. Не лезем глубже чем дети контейнера
 } catch ( e ) { return false }
}
</script>


</head>
<body>

<div class="tabSwitchContainer" id="tabSwitchContainer">
	<a href="#" onclick="activateTab( 1 ); return false;" SC="sc_apply_class_by_id:activate:1:active">Tab 1</a>
	<a href="#" onclick="activateTab( 2 ); return false;" SC="sc_apply_class_by_id:activate:2:active">Tab 2</a>
</div>
<div class="tabContentContainer" id="tabContentContainer">
	<div class="tabContent" SC="sc_show_content_by_id:activate:1">
		Boris
	</div>
	<div class="tabContent" SC="sc_show_content_by_id:activate:2">
		Vova
	</div>
</div>

<script type="text/javascript">
	activateTab( 1 );
</script>


</body>
</html>

Кажется немного сложным, но этот код легко масштабировать под любые задачи.

Например, каждый таб будет иметь разные цвета активации, переключателями может служить любой элемент, контейнеры можно располагать в любом месте кода (главное им отправить событие о том, что нажали на таб), и так далее.

[bgraf]

спасибо огромное