Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 04.10.2015
Сообщений: 16

Не могу разобраться где ошибка

14.12.2015, 11:57. Показов 824. Ответов 3
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Дано меню. По клику на определённый его пункт появляется содержание этого пункта. А у меня по клику на любой пункт появляется содержание 1 меню. Сломал голову, но никак не пойму где ошибка. Подскажите, что не так. Код прилагается. Заранее благодарю!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>doc</title>
<style type="text/css">
.info1, .info2, .info3, .info4, .info5{
display: none;
}
</style>
</head>
<body>
<h3>Содержание</h3>
<ul id="menu">
<li>Меню 1</li>
<li>Меню 2</li>
<li>Меню 3</li>
<li>Меню 4</li>
<li>Меню 5</li>
</ul>
<span id="info"><div class="info1">
<h3>Содержание 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam harum temporibus saepe praesentium laborum ut minus, nam optio aliquid beatae deserunt laboriosam aperiam voluptatibus dolorum fuga ducimus laudantium! Officia, nobis.</p>
</div>
<div class="info2">
<h3>Содержание 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor natus dolorem at eum error pariatur laboriosam quibusdam obcaecati, aliquam a hic esse non earum ducimus rem distinctio quas! Magnam, corporis.</p>
</div>
<div class="info3">
<h3>Содержание 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nisi vero aliquid praesentium. Temporibus dignissimos, fugiat ullam tenetur ab mollitia, adipisci velit obcaecati distinctio rem esse officia commodi suscipit quam.</p>
</div>
<div class="info4">
<h3>Содержание 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae perferendis, qui nihil asperiores dignissimos deserunt, omnis. Rem exercitationem excepturi, dolorem, dicta atque veritatis voluptatum, ipsam hic veniam earum debitis maxime?</p>
</div>
<div class="info5">
<h3>Содержание 5</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores, labore cupiditate, eligendi voluptate expedita excepturi repudiandae laboriosam nemo eius! Itaque, illo voluptatibus ut placeat est doloribus dignissimos suscipit quia.</p>
</div></span>
<script type="text/javascript">
var li=document.getElementById("menu").child ren;
var info=document.getElementById("info").chi ldren;

for(var i=0; i<li.length; i++){
li[i].onclick=function(){

var info_style=getComputedStyle(document.get ElementById("info").children[0]);
if (info_style.display=="block"){
document.getElementById("info").children[0].style.display="none";
document.getElementById("info").removeAt tribute("class", "active");
}
else
{
document.getElementById("info").children[0].style.display="block";
document.getElementById("info").setAttri bute("class", "active");
}
}

}
</script>
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
 14.12.2015, 11:57
Ответы с готовыми решениями:

Не могу разобраться, где ошибка в AJAX
Доброго времени суток. Не могу понять, но вроде не идет отправка AJAX-запроса в файл. Помогите найти ошибку... &lt;span...

Где ошибка? Не могу разобраться
Весь код если понадобится using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...

Не могу разобраться где ошибка
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.IO; namespace G_08_L_05 {...

3
 Аватар для Monty161
6 / 6 / 6
Регистрация: 01.09.2015
Сообщений: 52
15.12.2015, 14:38
MrAmid, аааааааа. Запихайте код в теги.

Добавлено через 31 минуту
MrAmid, нельзя запихивать div в span. Потому что span - это строчный элемент, а див - блочный. Если вы определите для них один тип display:block тогда хорошо.
Плохо:
HTML5
1

<span id="info"><div class="info1">
Хорошо:
HTML5
1

<div id="info"><div class="info1">
Но это не всё

Добавлено через 1 час 14 минут
MrAmid, содержание 1 меню появляется потому что указано
JavaScript
1
2

var info_style=getComputedStyle(document.getElementById("info").children[0]); 
document.getElementById("info").children[0].style.display="none";
Видите, что в скобках стоит? Он всегда будет брать первого потомка то бишь
HTML5
1

<div class="info1">
Добавлено через 23 минуты
MrAmid, примечание: смотрите на то,что в квадратных скобках

Добавлено через 1 час 0 минут
MrAmid, скидываю полную версию. Скрипт на jQuery. Примитивно, но показательно
HTML5
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

<h3>Содержание</h3>
<ul id="menu">
    <li>Меню 1</li>
    <li>Меню 2</li>
    <li>Меню 3</li>
    <li>Меню 4</li>
    <li>Меню 5</li>
</ul>
 
<div id="info">
  <div class="info1">
    <h3>Содержание 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam harum temporibus saepe praesentium laborum ut minus, nam optio aliquid beatae deserunt laboriosam aperiam voluptatibus dolorum fuga ducimus laudantium! Officia, nobis.</p>
  </div>
 
  <div class="info2">
    <h3>Содержание 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor natus dolorem at eum error pariatur laboriosam quibusdam obcaecati, aliquam a hic esse non earum ducimus rem distinctio quas! Magnam, corporis.</p>
  </div>
 
  <div class="info3">
    <h3>Содержание 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nisi vero aliquid praesentium. Temporibus dignissimos, fugiat ullam tenetur ab mollitia, adipisci velit obcaecati distinctio rem esse officia commodi suscipit quam.</p>
  </div>
 
  <div class="info4">
    <h3>Содержание 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae perferendis, qui nihil asperiores dignissimos deserunt, omnis. Rem exercitationem excepturi, dolorem, dicta atque veritatis voluptatum, ipsam hic veniam earum debitis maxime?</p>
  </div>
 
  <div class="info5">
    <h3>Содержание 5</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores, labore cupiditate, eligendi voluptate expedita excepturi repudiandae laboriosam nemo eius! Itaque, illo voluptatibus ut placeat est doloribus dignissimos suscipit quia.</p>
  </div>
</div>
CSS
1
2
3

.info1, .info2, .info3, .info4, .info5{
     display: none;
}
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
33
34

//для справки: версия jQuery 1.8.3
$(document).ready(function(){
  $('li').click(function(){     // берем набор из li и пишем обработчик события по клику на них". 
    var num=$('li').index(this);    // переменной присваиваем номер "кликнутого" li 
 
    switch(num)   // рассматриваем номер "кликнутого" li 
    {
      case 0: $('.info1').show()          // случае если это первый элемент списка, то показываем первый див
      $('#info>div').not('.info1').hide()   // а другие скрываем. 
      break
 
      case 1: $('.info2').show()               // аналогия
      $('#info>div').not('.info2').hide()     // аналогия
      break
 
      case 2: $('.info3').show()
      $('#info>div').not('.info3').hide()
      break
 
      case 3: $('.info4').show()
      $('#info>div').not('.info4').hide()
      break
 
      case 4: $('.info5').show()
      $('#info>div').not('.info5').hide()
      break
    }   
 
  });
});
/* примечания: 
    1) использование $('li') формирует набор из всех li, которые есть на странице
    2) $('li').index() выдает номер некоторого li в сформированном наборе
        Если уточнить, то $('li').index(this) выдаст номер "кликнутого" li, потому что this привязан к тому элементу li, на котором произошёл клик
1
0 / 0 / 0
Регистрация: 04.10.2015
Сообщений: 16
16.12.2015, 17:48  [ТС]
Monty161, спасибо за пояснение, но только нужно написать без jQuery.
Я согласен, что span можно вообще убрать, тогда в коде
var info_style=getComputedStyle(document.get ElementById("info").children[0]);
document.getElementById("info").children[0].style.display="none";
в скобках нужно поставить переменную, значение которой было соответствовать нажатой li[i]
Пробовал в скобки вместо [0] ставить [i], но ничего не выходит. Вот в этом то и проблема...
0
 Аватар для arcmag
347 / 322 / 203
Регистрация: 27.06.2014
Сообщений: 762
16.12.2015, 18:07
Вот как вариант на чистом JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

        function spoilerMenu (selector) {
            var elements = typeof selector === "string" ? document.querySelectorAll (selector) : selector,
                blocks = document.querySelectorAll ("[data-text]"),
                close = function () {
                    for (var i = 0, len = blocks.length; i < len; i++)
                        blocks[i].style.display = "none";
                },
                f = function () {
                    close ();
                    document.querySelector ("[data-text='"+ this.dataset["block"] +"']").style.display = "block";
                };
            for (var i = 0, len = elements.length; i < len; i++) elements[i].addEventListener ("click", f);
            close ();
        }
        window.addEventListener("load", function () {
            spoilerMenu ("#menu li");
        });
HTML5
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

<h3>Содержание</h3>
<ul id="menu">
    <li data-block="1">Меню 1</li>
    <li data-block="2">Меню 2</li>
    <li data-block="3">Меню 3</li>
    <li data-block="4">Меню 4</li>
    <li data-block="5">Меню 5</li>
</ul>
<div data-text="1">
    <h3>Содержание 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam harum temporibus saepe praesentium laborum ut minus, nam optio aliquid beatae deserunt laboriosam aperiam voluptatibus dolorum fuga ducimus laudantium! Officia, nobis.</p>
</div>
<div data-text="2">
    <h3>Содержание 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor natus dolorem at eum error pariatur laboriosam quibusdam obcaecati, aliquam a hic esse non earum ducimus rem distinctio quas! Magnam, corporis.</p>
</div>
<div data-text="3">
    <h3>Содержание 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nisi vero aliquid praesentium. Temporibus dignissimos, fugiat ullam tenetur ab mollitia, adipisci velit obcaecati distinctio rem esse officia commodi suscipit quam.</p>
</div>
<div data-text="4">
    <h3>Содержание 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae perferendis, qui nihil asperiores dignissimos deserunt, omnis. Rem exercitationem excepturi, dolorem, dicta atque veritatis voluptatum, ipsam hic veniam earum debitis maxime?</p>
</div>
<div data-text="5">
    <h3>Содержание 5</h3>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolores, labore cupiditate, eligendi voluptate expedita excepturi repudiandae laboriosam nemo eius! Itaque, illo voluptatibus ut placeat est doloribus dignissimos suscipit quia.</p>
</div>
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
 16.12.2015, 18:07
Помогаю со студенческими работами здесь

Не могу разобраться в логах, где ошибка?
Приложение не запускается на Андроид устройствах Помогите пожалуйста разобраться в этом!! 06-07 10:35:51.829:...

Где тут ошибка и почему, ну ни как не могу разобраться
/* Программа: Параметры vararg и перегрузка. */ class VarArgs3 { static void vaTest(int ... v) { ...

Произведение матриц. Не могу разобраться, где ошибка в умножении, перемножает, конечно, но неправильно...
Даны три datagridviev, два из них для ввода пользователем матрицы а третья для вывода. Не могу разобраться где ошибка в умножении,...

Error: lvalue required as left operand of assignment. Не могу разобраться где ошибка
#include &lt;stdio.h&gt; #include &lt;stdlib.h&gt; int main() { int n, count = 0; for (n = 111; n &lt; 1000; ++n) if (n / 100...

Не могу разобраться где ошибка!error LNK2019: ссылка на неразрешенный внешний символ
#include &quot;stdafx.h&quot; #include &quot;conio.h&quot; #include &quot;stdio.h&quot; #include &quot;stdlib.h&quot; #include &quot;string.h&quot; #include &quot;math.h&quot; #include...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT?
DevAlt 26.03.2026
Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru