powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
16 сообщений из 16, страница 1 из 1
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830722
Хочу сделать следующее: при выборе пункта (закладки) показывался соответствующий ассоциированный с выбранной закладкой скрытый слой, а остальные слои прятались. Наподобие PageControl в Delphi.
Написал HTML и скрипт, в FireFox и Chrome всё работает как задумано, а в Internet Explorer работает частично.
Ниже скрипт условно разделил на две части, вторая часть в IE не выполняется.
В консоли ошибок фаирфокса пусто.
скрипт
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
<script type="text/javascript">
function FocusTab(Tab) 
{
  /*  1-я часть скрипта (меняем стиль самой закладки ... обычная или активная) */
  var TabList=Tab.parentNode.parentNode.childNodes;
  for (var i=0;i<=TabList.length-1 ;i++)
  {	  var el=TabList[i];
	  if (el==Tab.parentNode)
	  {el.className="FocusedTab";  var x=i; }
	  else { el.className=""; }
  }
  
  /* 2-я часть скрипта (отображаем или скрываем нужный слой в соответствии с выбранной закладкой ) */
  TabList=Tab.parentNode.parentNode.parentNode.childNodes;
  for (i=0;i<TabList.length-1;i++)
  {
	el=TabList[i];
	if (el.id=="tabcont")
	{
		TabList=el.childNodes;
	    for (i=0;i<TabList.length-1;i++)
	    {
			el=TabList[i];
     		if (el.className=="cont")
			{
			    {el.style.display=(i==x)?'block':'none'}
		    }
	    }
	}
  }
}
</script>

HTML
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div>
  <ul id="tabnav">
	<li class="FocusedTab"><a href="javascript:void(0)" onclick="FocusTab(this)">TAB № 1</a></li>
	<li class=""><a href="javascript:void(0)" onclick="FocusTab(this)">TAB № 2</a></li>
	<li class=""><a href="javascript:void(0)" onclick="FocusTab(this)">TAB № 3</a></li>
	<li class=""><a href="javascript:void(0)" onclick="FocusTab(this)">TAB № 4</a></li>
  </ul>
  <div id="tabcont">
    <div class="cont" style="display:block">TAB № 1</div>
    <div class="cont" style="display:none">TAB № 2</div>
    <div class="cont" style="display:none">TAB № 3</div>
    <div class="cont" style="display:none">TAB № 4</div>
  </div>
</div>

Понимаю, что скрипт написан по-быдлокодовски, впервые пишу на яваскрипт, спасибо w3schools.com, но на большее меня пока не хватило. Помогите написать правильно
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830740
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
явас криптусвторая часть в IE не выполняется.
В консоли ошибок фаирфокса пустоа в консоли IE ?
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830775
а она там есть ? я не в курсе.
у меня IE 8, нашел "Средства разработчика F12", но ошибок не вижу.
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830804
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830866
Паганель,

хотел написать в дебагере console.info а он не редактируется. Написал блокноте - вот теперь в дебагере ошибка: 'console'- определение отсутствует. Этого достаточно, дальше разбираться нет желания.

Слушайте, мне не нужно постигать все тонкости, не собираюсь становиться гуру.
Просто хочу ПРАВИЛЬНО освоить азы.

Скрипт, который я тут привел, достаточно прост, чтобы опытному глазу увидеть ошибки, а также посоветовать как переписать, чтобы было кроссбраузерно
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830972
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
У меня в IE9 Ваш код работает
http://jsfiddle.net/nfnkg/

8-го IE у меня нет, увы ничем больше помочь не могу
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37830990
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
явас криптусСлушайте, мне не нужно постигать все тонкости, не собираюсь становиться гуру.
Просто хочу ПРАВИЛЬНО освоить азы.

Тогда возьмите jQuery и не парьте людям мозг.
Я вижу, что вы пытаетесь вычитать класс у нод неопределенного типа, читайте зачем люди делают проверки (node.nodeType === 1).
Этого достаточно, дальше разбираться нет желания. (с) Ваш.
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37831214
mage.lanТогда возьмите jQuery и не парьте людям мозг.
Я вижу, что вы пытаетесь вычитать класс у нод неопределенного типа, читайте зачем люди делают проверки (node.nodeType === 1).
Этого достаточно, дальше разбираться нет желания. (с) Ваш. Ваш мозг, Вам и беречь его.
jQuery - вот поэтому Вам нечего посоветовать. Опять же Ваш мозг. (с) Мой.
А проверка nodeType ничего не изменила.
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37831220
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
явас криптусмне не нужно постигать все тонкости, не собираюсь становиться гуруучитывая это, я тоже голосую за использование jQuery для этой задачи
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37831278
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Паганельявас криптусмне не нужно постигать все тонкости, не собираюсь становиться гуруучитывая это, я тоже голосую за использование jQuery для этой задачиИли освоить перевод денег на чужую карточку... :)
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37831290
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
function FocusTab(Tab) 
{
  /*  1-я часть скрипта (меняем стиль самой закладки ... обычная или активная) */
  var TabList=Tab.parentNode.parentNode.childNodes;
  for (var i=0;i<=TabList.length-1 ;i++)
  {	  var el=TabList[i];
	  if (el==Tab.parentNode)
	  {el.className="FocusedTab";  var x=i; }
	  else { el.className=""; }
  }
  
  /* 2-я часть скрипта (отображаем или скрываем нужный слой в соответствии с выбранной закладкой ) */
  TabList=Tab.parentNode.parentNode.parentNode.childNodes;
  for (i=0;i<TabList.length-1;i++)
  {
	el=TabList[i];
	if (el.id=="tabcont")
	{
		TabList=el.childNodes;
	    for (i=0;i<TabList.length-1;i++)
	    {
			el=TabList[i];
     		if (el.className=="cont")
			{
			    {el.style.display=(i==x)?'block':'none'}
		    }
	    }
	}
  }
}



P.S. И не экономьте на переменных: во "2-я часть скрипта" у Вас цикл по i по TabList, которые Вы внутри переприсваиваете со всеми вытекающими...
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37831763
Ex_Soft,

спасибо! я же говорил, что опытный глаз сразу увидит ошибки :)
-1 по делфийской привычке повтыкал, не обратив внимания на условие i< ...
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37832464
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
явас криптусjQuery - вот поэтому Вам нечего посоветовать.
Молодой человек, прежде чем агрится, вы бы лучше голову включили. Скажите спасибо не ленивому Ex_Soft, который посмотрел на вашу ерунду под дебагером. И еще раз после "мне не нужно постигать все тонкости" отвечать вам охоты нет. То? на что вам указали это лишь кусок айсберга. RTFM DOM
явас криптусА проверка nodeType ничего не изменила.
Че правда что-ли? А кто орал про кросбраузерность? У вас хром на компе есть?
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37832684
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
явас криптусХочу сделать следующее: при выборе пункта (закладки) показывался соответствующий ассоциированный с выбранной закладкой скрытый слой, а остальные слои прятались... Помогите написать правильно
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<!DOCTYPE HTML>
<html>  
<head>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
  <style>
    .navigation-tab.selected .navigation-link { color: Green; }
  </style>
</head>
<body>
  <div>
    <ul id="navigation">
      <li class="navigation-tab selected">
        <a class="navigation-link" data-content="#pageOne" href="javascript:void(0)">TAB № 1</a>
      </li>
      <li class="navigation-tab">
        <a class="navigation-link" data-content="#pageTwo" href="javascript:void(0)">TAB № 2</a>
      </li>
      <li class="navigation-tab">
        <a class="navigation-link" data-content="#pageThree" href="javascript:void(0)">TAB № 3</a>
      </li>
      <li class="navigation-tab">
        <a class="navigation-link" data-content="#pageFour" href="javascript:void(0)">TAB № 4</a>
      </li>
    </ul>
    <div id="content">
      <div class="content-page" id="pageOne" style="display:block">TAB № 1</div>
      <div class="content-page" id="pageTwo" style="display:none">TAB № 2</div>
      <div class="content-page" id="pageThree" style="display:none">TAB № 3</div>
      <div class="content-page" id="pageFour" style="display:none">TAB № 4</div>
    </div>
  </div>
  <script>
    $('#navigation').on('click', '.navigation-link', onNavigationClick);    
    
    function onNavigationClick(event) {
      // Снимаем выделение с закладок и прячем контент
      $('.navigation-tab.selected').removeClass('selected');
      $('.content-page').hide();
      
      // Выделяем нужную закладку и отображаем соотв. контент
      $(this).closest('.navigation-tab').addClass('selected');
      $($(this).data('content')).show();
    }
  </script>
</body>
</html>


На что обратить внимание:
1. именование идентификаторов и классов элементов;
2. делегирование события click вместо навешивания обработчика на каждый элемент A;
3. закладки ассоциируются с контентом через атрибут, значение которого содержит конкретный идентификатор.
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37832773
skyANA,

большое спасибо! все советы учту.
...
Рейтинг: 0 / 0
Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
    #37832781
mage.lanявас криптусjQuery - вот поэтому Вам нечего посоветовать.
Молодой человек, прежде чем агрится, вы бы лучше голову включили. Скажите спасибо не ленивому Ex_Soft, который посмотрел на вашу ерунду под дебагером. И еще раз после "мне не нужно постигать все тонкости" отвечать вам охоты нет. То? на что вам указали это лишь кусок айсберга. RTFM DOM
явас криптусА проверка nodeType ничего не изменила.
Че правда что-ли? А кто орал про кросбраузерность? У вас хром на компе есть?Сколько уже было сказано: нет охоты - не отвечайте! Кто заставляет ? Зачем нарисовались ?
Зачем мне постигать все тонкости ? Яваскрипт мне понадобился в первый и возможно в последний раз.
Хром есть (вы не внимательно читаете), в нем всё работает и в консоли ошибок нет.
...
Рейтинг: 0 / 0
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Первое не совсем удачное знакомство с javascript. Посоветуйте с обходом дома
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]