Создание таблицы содержимого в древовидной архитектуре с использованием HTML, CSS и JavaScript

Опубликовано: 5 Января, 2022

Элементы древовидного представления представляют собой выпадающее меню, однако хорошо организованное. Этот вид представления придает вашему веб-сайту организованный вид. Для создания архитектуры древовидного представления раскрывающегося списка мы можем использовать HTML, CSS и JavaScript. Мы разделим всю процедуру на два раздела «Создание структуры» и «Проектирование структуры». Ниже подробно описаны оба раздела.

Создание структуры: в этом разделе мы создадим базовую структуру таблицы содержания в древовидной архитектуре элементов.

  • HTML код:
    <!DOCTYPE html>
    < html >
    < head >
    < title >
    Create a Table of Content in Tree
    View Architecture using HTML, CSS
    and JavaScript
    </ title >
    </ head >
    < body >
    < h1 >GeeksforGeeks</ h1 >
    < b >A Computer Science Portal for Geeks</ b >
    < br >
    < ul id = "tuitorial" >
    < li >< span class = "gfg" >Tutorials</ span >
    < ol class = "cover" type = "i" >
    < li >< span class = "gfg" >Algorithms</ span >
    < ol class = "cover" type = "a" >
    < li >
    < span class = "gfg" >
    Analysis of Algorithms
    </ span >
    < ol class = "cover" >
    < li >Asymptotic Analysis</ li >
    < li >Worst, Average and Best Cases</ li >
    < li >Asymptotic Notations</ li >
    < li >Little o and little omega notations</ li >
    < li >Lower and Upper Bound Theory</ li >
    < li >Analysis of Loops</ li >
    < li >Solving Recurrences</ li >
    < li >Amortized Analysis</ li >
    < li >What does 'Space Complexity' mean?</ li >
    < li >Pseudo-polynomial Algorithms</ li >
    < li >Polynomial Time Approximation Scheme</ li >
    < li >A Time Complexity Question</ li >
    </ ol >
    </ li >
    < li >Searching Algorithms</ li >
    < li >Sorting Algorithms</ li >
    < li >Graph Algorithms</ li >
    < li >Pattern Searching</ li >
    < li >Geometric Algorithms</ li >
    < li >Mathematical</ li >
    < li >Randomized Algorithms</ li >
    < li >Greedy Algorithms</ li >
    < li >Dynamic Programming</ li >
    < li >Divide and Conquer</ li >
    < li >Backtracking</ li >
    < li >Branch and Bound</ li >
    < li >All Algorithms</ li >
    </ ol >
    </ li >
    < li >
    < spna class = "gfg" >
    Data Structures
    </ span >
    < ol class = "cover" type = "a" >
    < li >Arrays</ li >
    < li >Linked List</ li >
    < li >Stack</ li >
    < li >Queue</ li >
    < li >Binary Tree</ li >
    < li >Binary Search Tree</ li >
    < li >Heap</ li >
    < li >Hashing</ li >
    < li >Graph</ li >
    < li >Advanced Data Structure</ li >
    < li >Matrix</ li >
    < li >Strings</ li >
    < li >All Data Structures</ li >
    </ ol >
    </ li >
    < li >
    < spna class = "gfg" >Languages</ span >
    < ol class = "cover" type = "a" >
    < li >C</ li >
    < li >C++</ li >
    < li >Java</ li >
    < li >Python</ li >
    < li >C#</ li >
    < li >Javascript</ li >
    < li >JQuery</ li >
    < li >SQL</ li >
    < li >PHP</ li >
    < li >Scala</ li >
    < li >Perl</ li >
    < li >Go Language</ li >
    < li >HTML</ li >
    < li >CSS</ li >
    < li >Kotlin</ li >
    </ ol >
    </ li >
    < li >
    < span class = "gfg" >Interview Corner</ span >
    < ol class = "cover" type = "a" >
    < li >Company Preparation</ li >
    < li >Top Topics</ li >
    < li >Practice Company Questions</ li >
    < li >Interview Experiences</ li >
    < li >Experienced Interviews</ li >
    < li >Internship Interviews</ li >
    < li >Competitive Programming</ li >
    < li >Design Patterns</ li >
    < li >Multiple Choice Quizzes</ li >
    </ ol >
    < li >
    < spna class = "gfg" >GATE</ span >
    </ li >
    < li >
    < spna class = "gfg" >ISRO CS</ span >
    </ li >
    < li >
    < spna class = "gfg" >UGC NET CS</ span >
    </ li >
    < li >
    < spna class = "gfg" >CS Subjects</ span >
    </ li >
    < li >
    < class = "gfg" >Web Technologies</ span >
    </ li >
    </ li >
    </ ol >
    </ li >
    </ ul >
    </ body >
    </ html >

Проектирование структуры: В предыдущем разделе мы создали структуру основных элементов древовидного представления. В этом разделе мы разработаем структуру древовидного представления.

  • Код CSS:
    < style >
    h1 {
    color: green;
    }
    .gfg {
    cursor: pointer;
    }
    .gfg::before {
    content: "25B6";
    color: black;
    display: inline-block;
    margin-right: 8px;
    }
    .cover {
    display: none;
    }
    .active {
    display: block;
    }
    ol [type=a] {
    background-color: yellow;
    color: purple;
    }
    </ style >
  • Код JavaScript:
    <script>
    var toggler = document.getElementsByClassName( "gfg" );
    var i;
    for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener( "click" ,
    function () {
    this .parentElement.querySelector( ".cover" )
    .classList.toggle( "active" );
    this .classList.toggle( "gfg-down" );
    }
    );
    }
    </script>

Объедините код HTML, CSS и JavaScript: это последний код после объединения вышеуказанных разделов. Он отобразит оглавление в древовидной архитектуре.

<!DOCTYPE html>
< html >
< head >
< title >
Create a Table of Content in Tree
View Architecture using HTML, CSS
and JavaScript
</ title >
< style >
h1 {
color: green;
}
.gfg {
cursor: pointer;
}
.gfg::before {
content: "25B6";
color: black;
display: inline-block;
margin-right: 8px;
}
.cover {
display: none;
}
.active {
display: block;
}
ol [type=a] {
background-color: yellow;
color: purple;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >A Computer Science Portal for Geeks</ b >
< br >
< ul id = "tuitorial" >
< li >< span class = "gfg" >Tutorials</ span >
< ol class = "cover" type = "i" >
< li >< span class = "gfg" >Algorithms</ span >
< ol class = "cover" type = "a" >
< li >
< span class = "gfg" >Analysis of Algorithms</ span >
< ol class = "cover" >
< li >Asymptotic Analysis</ li >
< li >Worst, Average and Best Cases</ li >
< li >Asymptotic Notations</ li >
< li >Little o and little omega notations</ li >
< li >Lower and Upper Bound Theory</ li >
< li >Analysis of Loops</ li >
< li >Solving Recurrences</ li >
< li >Amortized Analysis</ li >
< li >What does 'Space Complexity' mean?</ li >
< li >Pseudo-polynomial Algorithms</ li >
< li >Polynomial Time Approximation Scheme</ li >
< li >A Time Complexity Question</ li >
</ ol >
</ li >
< li >Searching Algorithms</ li >
< li >Sorting Algorithms</ li >
< li >Graph Algorithms</ li >
< li >Pattern Searching</ li >
< li >Geometric Algorithms</ li >
< li >Mathematical</ li >
< li >Randomized Algorithms</ li >
< li >Greedy Algorithms</ li >
< li >Dynamic Programming</ li >
< li >Divide and Conquer</ li >
< li >Backtracking</ li >
< li >Branch and Bound</ li >
< li >All Algorithms</ li >
</ ol >
</ li >
< li >
< spna class = "gfg" >Data Structures</ span >
< ol class = "cover" type = "a" >
< li >Arrays</ li >
< li >Linked List</ li >
< li >Stack</ li >
< li >Queue</ li >
< li >Binary Tree</ li >
< li >Binary Search Tree</ li >
< li >Heap</ li >
< li >Hashing</ li >
< li >Graph</ li >
< li >Advanced Data Structure</ li >
< li >Matrix</ li >
< li >Strings</ li >
< li >All Data Structures</ li >
</ ol >
</ li >
< li >
< spna class = "gfg" >Languages</ span >
< ol class = "cover" type = "a" >
< li >C</ li >
< li >C++</ li >
< li >Java</ li >
< li >Python</ li >
< li >C#</ li >
< li >Javascript</ li >
JavaScript Вопросы о Web технологиях HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023