Создать html-страницу с деревом вложенных директорий

@Esso11 · Регистрация: 20.08.2017

Студворк — интернет-сервис помощи студентам

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

PHP/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
47
48
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
 
    <link rel="stylesheet" href="3_4(2).css">
    <script>
function look(type)
  {
   param=document.getElementById(type);
   if(param.style.display == "none") param.style.display = "block";
   else param.style.display = "none"
  } 
  </script>
</head>
<body>
<form>
 
  <div id="div_1" name="div_11" style="display:block">
  <h4><a href="javascript:look('div1');">this PC</a></h4>
  <div id="div1" style="display:block">
  <ul class ="nav_ct">
  <li><span><a href="javascript:look('div2');">Local Disc(C:)</a></span>
     <div id="div2" style="display:block">
     <ul>
    <li><span>Program Files</span>
    <div id="div1" style="display:block">
        
         <li><span>Users</span></li>
         <li><span>Windows </span></li>
        </ul>
      </li>
     </ul>
   </li>
   <li><span><a href="javascript:look('div3');">Local Disc(D:)</a></span></li>
   <div id="div3" style="display:block">
   <ul>
         <li><span>New Folder 1</span></li>
         <li><span>New Folder 2</span></li>
         <li><span>New Folder 3</span></li>
    </ul>
    <li><span><a href="javascript:look('div4');">Local Disc(E:)</a></span></li>
    <div id="div4" style="display:block">
  
  </ul>
  </form>
</body>
</html>

и СSS

CSS
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
body{background:#f2f2f2;} 
 
 
 
 
.nav-ct li, a {
    display:inline-block;
    text-align:center;
    font: normal 14px Open Sans;
    text-transform: uppercase;
    text-decoration:none;
    color:#000; 
}
 
a:hover {
    font-weight:bold;
    text-decoration:none; 
}
a::after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

Меня интересует что делает вот эта

PHP/HTML
1
2
3
4
5
6
7
8
    <script>
function look(type)
  {
   param=document.getElementById(type);
   if(param.style.display == "none") param.style.display = "block";
   else param.style.display = "none"
  } 
  </script>

функция
и

HTML5
1
2
<div id="div_1" name="div_11" style="display:block">
  <h4><a href="javascript:look('div1');">this PC</a></h4>

эти две строки был бы раз развернутому комментарию

CSS
1
2
3
4
5
6
7
8
.nav-ct li, a {
    display:inline-block;
    text-align:center;
    font: normal 14px Open Sans;
    text-transform: uppercase;
    text-decoration:none;
    color:#000; 
}

@Mr_Sergo · 05.03.2019, 22:10

Сообщение от Esso11

Меня интересует что делает вот эта

JavaScript
1
2
3
4
5
6
function look(type)  // Параметр type.
{
    param=document.getElementById(type);  // Присваиваем param-у ссылку на элемент, взятую по id элемента. В данном случае переданный параметр type в функции look является id-шником элемента.
    if(param.style.display == "none") param.style.display = "block";  // Если элемент (ссылка на который хранится в type) не виден (none) то делаем его видимым (block)
    else param.style.display = "none"  // В противном случае делаем его невидимым
}

@Esso11 · 05.03.2019, 22:17 **[ТС]**

Mr_Sergo, а скрывается он при нажатии на него? просто не вижу там метода onclick

Добавлено через 1 минуту
Mr_Sergo, тогда <h4><a href="javascript:look('div1');">this PC</a></h4> в div1 помещается элемент this PC и передается в функцию look?

Добавлено через 46 секунд
Mr_Sergo, а <div id="div_1" name="div_11" style="display:block"> строка для чего тогда?

@amr-now · 05.03.2019, 22:19

Подозреваю, что для param забыли написать var или let.

JavaScript
1
2
3
4
        function look(type) {
            var param = document.getElementById(type);
            param.style.display = param.style.display === "none" ? "block" : "none";
        }

@Esso11 · 05.03.2019, 22:21 **[ТС]**

amr-now, переписали в тернарном операторе? а подсказать могли бы по поводу ...остального? очень нужно

@amr-now · 05.03.2019, 22:27

Esso11, 'div1' передается в функцию look

Там же написано.

@Esso11 · 05.03.2019, 22:29 **[ТС]**

amr-now, javascript:look('div1'); эту транскрипцию переписать по другому можно как то?

@amr-now · 05.03.2019, 22:30

Esso11, там полстраницы Г-кода.

@Esso11 · 05.03.2019, 22:32 **[ТС]**

amr-now, <div id="div_1" name="div_11" style="display:block"> а это для чего? такого id ни где в коде не используется как и name="div_11" зачем тогда они?

Добавлено через 33 секунды
amr-now, а как можно переписать этот код? если есть у вас время?

@Mr_Sergo · 06.03.2019, 00:54

Сообщение от Esso11

как можно переписать этот код?

Можно так -> https://codepen.io/Mr_Sergo/pe... itors=1000

PHP/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
<ul class="main">this PC
    <ul>
        <li class="main">Local Disc(C:)
            <ul>
                <li>Program Files</li>
                <li>Users</li>
                <li>Windows</li>
            </ul>
        </li>
        <br>
        <li class="main">Local Disc(D:)
            <ul>
                <li>New Folder 1</li>
                <li>New Folder 2</li>
                <li>New Folder 3</li>
            </ul>
        </li>
    </ul>
</ul>
 
<script>
    document.addEventListener('click',look);
    function look(e){
        if(e.target.className == 'main'){
            let param = e.target.children[0];
            param.style.display = param.style.display === "none" ? "block" : "none";
        }
    }
</script>

Если на this PC сворачивание/разворачивание не нужно удалите у него класс main

Добавлено через 1 минуту
amr-now,
Извините, подрезал у вас строчку кода

так лень было самому писать

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	05.03.2019, 22:17 [ТС]
	Mr_Sergo, а скрывается он при нажатии на него? просто не вижу там метода onclick Добавлено через 1 минуту Mr_Sergo, тогда <h4><a href="javascript:look('div1');">this PC</a></h4> в div1 помещается элемент this PC и передается в функцию look? Добавлено через 46 секунд Mr_Sergo, а <div id="div_1" name="div_11" style="display:block"> строка для чего тогда? 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	05.03.2019, 22:21 [ТС]
	amr-now, переписали в тернарном операторе? а подсказать могли бы по поводу ...остального? очень нужно 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	05.03.2019, 22:27
	Esso11, 'div1' передается в функцию look Там же написано. 0

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	05.03.2019, 22:29 [ТС]
	amr-now, javascript:look('div1'); эту транскрипцию переписать по другому можно как то? 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	05.03.2019, 22:30
	Esso11, там полстраницы Г-кода. 1

@Esso11 5 / 5 / 0 Регистрация: 20.08.2017 Сообщений: 685
	05.03.2019, 22:32 [ТС]
	amr-now, <div id="div_1" name="div_11" style="display:block"> а это для чего? такого id ни где в коде не используется как и name="div_11" зачем тогда они? Добавлено через 33 секунды amr-now, а как можно переписать этот код? если есть у вас время? 0