Создать 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,
Извините, подрезал у вас строчку кода

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

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@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