Код для смены "вкладок". Посоветуйте, как заставить его рабоать :)

senistra · July 22, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body>
<style>
.tabsCont2  
{color:#444751; 
display:inline-table ;
width: 365px;
font-size: 12px;
padding-right: 5px;
}
.tabs_content
{
	padding-left: 5px;
	line-height: 19px;
	font-family: calibri, sans-serif;
	font-size: 13px;
}
#left_subcont
{
	width: 260px;
	border-right: dotted #c3c3c3 1px;
	float: left;
}
.tabs
{
position: relative;
top: 0px;	
left:1px ;
zoom:1;
}
#tc2,#tc3
{
	display: none;
}
#tc1
{
	display: block;
	}
</style>
<script type="text/javascript" language="JavaScript">
var element;
function show_configuration(id) {
  element=document.getElementById(id);
  for (i=1; i<=12; i++)
  {
  document.getElementById('tc' + i).style.display ="none";
  }
  element.style.display="block";
}</script>

<div id="left_subcont">

	<div class="tabs">

	<a title="show" onclick="show_configuration('tc2')">Show content2</a><br>
	<a title="show" onclick="show_configuration('tc3')">Show content3</a><br>
	</div>
</div>

<div class="tabsCont2">
<!--dynamical-->   
   <div class="tabs_content" id="tc1">Content1
   </div>
<!--end dynamical-->
<!--dynamical-->   
   <div class="tabs_content" id="tc2">Content2
   </div>
<!--end dynamical-->
<!--dynamical-->   
   <div class="tabs_content" id="tc3">Content3
   </div>
<!--end dynamical-->
</div>


</body>

Здравствуйте!

Не обессудьте - первый код мой..

Что хочу от кода:

Чтобы по клику на ссылку "Show content" в правой части отображалось содержимое блока, который до клика обладал свойством display:none.

И чтобы при этом остальные блоки становились невидимыми (их порядка 12).

Сейчас это подобие скрипта только делает все блоки невидимыми...

Почему?

Как исправить/что добавить?

psywalker · July 22, 2010

Делаешь всё по методу: При клике все делаешь невидимые, а потом врубаешь тот, который нажал.

Кстати заметь, ты делаешь цикл из 11 итераций, а у тебя айдишников всего 3

senistra · July 22, 2010

Делаешь всё по методу: При клике все делаешь невидимые, а потом врубаешь тот, который нажал.
Кстати заметь, ты делаешь цикл из 11 итераций, а у тебя айдишников всего 3

Насчет цикла из 11 итераций - я отметила, что их будет около того.

Непонятно только, ответ означает, что код правильно написан?

Но он не работает.

Только прячет все.

fan · July 23, 2010

Сказал то он правильно, только не понятно для начинающего.

Попробуем так сказать.

В цикле все выключаешь, а выйдя из цикла, включаешь нужный.

Сама идея понятна?

senistra · July 23, 2010

Сказал то он правильно, только не понятно для начинающего.
Попробуем так сказать.
В цикле все выключаешь, а выйдя из цикла, включаешь нужный.
Сама идея понятна?

function show_configuration(id) {
  element=document.getElementById(id);
  for (i=1; i<=12; i++)
  {
  document.getElementById('tc' + i).style.display ="none";
  }
  element.style.display="block";
}</script>

element.style.display="block"; - он же не в цикле!

Great Rash · July 23, 2010

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

Давайте начнем писать вашу переключалку вместе:

1) все контейнеры для текста (tc1, tc2, tc3, ..., tcn) у вас должны лежать в общем контейнере (в принципе у вас это уже сделано - див с class="tabsCont2")

2) в скрипте находите этот контейнер

3) внутри этого контейнера находите всех потомков у которых tagName равен div

4) у вас получится массив со всеми дивами, расположенными в контейнере

5) проходитесь по нему циклом и прячете всё

6) потом показываете нужный

При таком подходе вам не обязательно будет знать точное количество контейнеров (tc1, tc2, tc3, ..., tcn) и вы сможете абстрагироваться от определенного номера (i<=12). Начните писать скрипт по пунктам, которые я написал. Что не понятно спрашивайте, мы обязательно поможем.

P.S. Если лень писать скрипт как я предложил: В вашем скрипте попробуйте написать цикл вот так (for (var i = 1; i < 12; i++)), есть мнение, что когда вы пишете <=, то скрипт ищет 13-ый элемент, не находит его и выдает ошибку, которую вы не видите по причине того, что не умеете пользоваться отладчиками.

senistra · July 23, 2010

P.S. Если лень писать скрипт как я предложил: В вашем скрипте попробуйте написать цикл вот так (for (var i = 1; i < 12; i++)), есть мнение, что когда вы пишете <=, то скрипт ищет 13-ый элемент, не находит его и выдает ошибку, которую вы не видите по причине того, что не умеете пользоваться отладчиками.

О! Я вас обожаю и уважаю! (пардон за экспрессию)

Отладчика нет - я в Espresso работаю.

И ошибка действительно была в 13-ом элементе.

Если вот так:

<script type="text/javascript" language="JavaScript">
var element;
function show_configuration(id) {
  element=document.getElementById(id);
  for (i=1; i<3; i++)
  {
  document.getElementById('tc' + i).style.display ="none";
  }
  element.style.display="block";
}</script>

то действительно все работает.

А мне не то что лениво... это все равно что русскому, учившему немецкий язык, пробовать писать стихи на английском.

Спасибо!

Sign In

Код для смены "вкладок". Посоветуйте, как заставить его рабоать :)

Question

senistra

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

senistra

Link to comment

Share on other sites

fan

Link to comment

Share on other sites

senistra

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

senistra

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information