Как заставить работать кнопку «Назад» (функция)? JS

как заставить кнопку "назад" работать нормально? Я хочу, чтобы каждый элемент навигации появлялся после нажатия кнопки «Назад». Дело в том, что мне нужно сделать панель навигации вот такой. Но не силен в javascript. поэтому хотелось бы получить некоторую помощь в этом.

HTML

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>js test</title>
</head>
<body>



   <div class = "container">

        <div>
            <button id = "btn1" class = "btn" onclick = "toggleBtn()">
                back
            </button>
        </div>

    <ul class = "nav">
        <li>
            <a id = "navHome"  class = "Nav-item" onclick = "toggleHome()"  href = "#"> Home </a>
        </li>
        <li>
            <a id = "navBlog" class = "Nav-item" onclick = "toggleBlog()" href = "#">Blog</a>
        </li>
        <li>
            <a id = "navEten" class = "Nav-item" onclick = "toggleEten()" href = "#">Eten</a>
        </li>
        <li>
            <a id = "navThuis" class = "Nav-item" onclick = "toggleThuis()" href = "#">Thuis</a>
        </li>
    </ul>
</div>

<div class = "container1">
    <h1 class = "link"> hoe kan ik de terug button netjes hebben? ik wil wanneer ik op terug klik dat alle linkjes terug komt. dus Home, Blog, Eten, Thuis. <br> Want op dit moment werkt het alleen goed als je twee keer op iets drukt. <br> Bijvoorbeeld twee keer op home of twee keer op blog </h1>
</div>




</body>
<script src = "main.js"></script>
</html>

function toggleHome() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navBlog").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");

 
 }

 function toggleBlog() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");
 
 }

 function toggleEten() {
  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navBlog").classList.toggle("btn");
  document.getElementById("navThuis").classList.toggle("btn");
 
 }

 function toggleThuis() {
  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("btn");
  document.getElementById("navEten").classList.toggle("btn");
  document.getElementById("navBlog").classList.toggle("btn");
 
 }


 function toggleBtn() {

  document.getElementById("btn1").classList.toggle("btn");
 
  document.getElementById("btn1").classList.toggle("btnOnClick");

  document.getElementById("navHome").classList.toggle("link");
  document.getElementById("navBlog").classList.toggle("link");
  document.getElementById("navEten").classList.toggle("link");
  document.getElementById("navThuis").classList.toggle("link");

 
 }

CSS

*{
  background-color: rgb(0, 0, 0);
}

.container{
  border: 5px solid white;
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

.container1{
  
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

a:link {
  text-decoration: none;
}

a{
  color: white;
}

.link{
  color: white;
}

a:hover{
  color: aqua;
}

ul{
  list-style: none;
}

.btn{
  color: transparent;
  background-color: transparent;
  border: 0px transparent;
  position: fixed;

  display: none;
}


.btnOnClick{
  color: white;
  background-color: transparent;
  border: 0px;
  position: relative;
}

nav{
  background-color: red;
}

Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. Текстовый наполнитель. По какой-то причине мне пришлось это сделать, иначе я вообще не смог опубликовать эту вставку. Мне жаль.

что вы пытаетесь сделать, я не понял проблемы, объясните немного, чтобы я мог вам помочь

— 21.03.2022 10:17

Я думал так же. Привет, Энтони, ты хочешь, чтобы кнопка «Назад» была раскрывающимся списком со всеми остальными элементами, которые затем отображались в этом раскрывающемся списке?

— 21.03.2022 10:18

javascript html css

21.03.2022 10:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, я взглянул на ваш код, но он немного избыточен и поэтому сложен в управлении. Поэтому я немного изменил его и сумел достичь своей цели. Посмотрите на фрагмент кода ниже:

<!DOCTYPE html>
<head>
    <style>
*{
  background-color: rgb(0, 0, 0);
}

.container{
  border: 5px solid white;
  background-size: contain;
  width: 100%;
  justify-content: center;
  display: flex;
}

a:link {
  text-decoration: none;
}

a{
  color: white;
}

.link{
  color: white;
}

a:hover{
  color: aqua;
}

ul{
  list-style: none;
}

.btnOnClick{
  color: white;
  background-color: transparent;
  border: 0px;
  position: relative;
}
    </style>
</head>
<body>
  <div class = "container">

  <div id = "button-wrapper"></div>

  <div id = "nav-wrapper">
    <ul class = "nav">
        <li>
            <a id = "navHome"  class = "Nav-item" name = "Home" onclick = "toggle(this.id, this.name)"  href = "#"> Home </a>
        </li>
        <li>
            <a id = "navBlog" class = "Nav-item" name = "Blog" onclick = "toggle(this.id, this.name)" href = "#">Blog</a>
        </li>
        <li>
            <a id = "navEten" class = "Nav-item" name = "Eten" onclick = "toggle(this.id, this.name)" href = "#">Eten</a>
        </li>
        <li>
            <a id = "navThuis" class = "Nav-item" name = "Thuis" onclick = "toggle(this.id, this.name)" href = "#">Thuis</a>
        </li>
    </ul>
  </div>
</div>

  <script>

    function toggle(id, name) {
      const navWrapper = document.getElementById("nav-wrapper");
      navWrapper.innerHTML = `<ul class = "nav"><li><a id = "${id}" class = "Nav-item" name = "${name}" onclick = "reverseToggle(this.id, this.name)" href = "#">${name}</a></li></ul>`;

      const buttonWrapper = document.getElementById("button-wrapper");
      buttonWrapper.innerHTML = `<button type = "button" class = "btnOnClick" onclick = "reverseToggle()">Back</button>`
    }

    function reverseToggle() {
      const navWrapper = document.getElementById("nav-wrapper");

      navWrapper.innerHTML = `<ul class = "nav">
        <li>
            <a id = "navHome"  class = "Nav-item" name = "Home" onclick = "toggle(this.id, this.name)"  href = "#"> Home </a>
        </li>
        <li>
            <a id = "navBlog" class = "Nav-item" name = "Blog" onclick = "toggle(this.id, this.name)" href = "#">Blog</a>
        </li>
        <li>
            <a id = "navEten" class = "Nav-item" name = "Eten" onclick = "toggle(this.id, this.name)" href = "#">Eten</a>
        </li>
        <li>
            <a id = "navThuis" class = "Nav-item" name = "Thuis" onclick = "toggle(this.id, this.name)" href = "#">Thuis</a>
        </li>
    </ul>`;

    const buttonWrapper = document.getElementById("button-wrapper");
      buttonWrapper.innerHTML = ""
    }
  </script>
</body>
</html>

Я добавил новую функцию переключения, которая принимает 2 параметра, которые используются для динамического создания нового элемента списка. Каждый из них будет содержать прослушиватель событий onclick с новой функцией reverseToggle, которая возвращает исходный контент. При нажатии первой функции «переключатель» также появляется кнопка, и у кнопки есть прослушиватель событий, который также связан с функцией reverseToggle. Я уверен, что все еще есть лучший способ добиться этого, но это работает, и код уже намного чище.

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

— 22.03.2022 13:43

я попробовал это с помощью этого кода: $('.navbar ul li a').click(function() { $(".aditional").hide() var target = $(this).attr('href'); $(target).show(); }), но это не сработало.

— 22.03.2022 13:48

Возможно, вы могли бы добавить несколько операторов if, которые проверяют идентификатор элемента, по которому был сделан щелчок. Если нажать «Домой», вы можете добавить в код несколько новых элементов списка. Если идентификатор был другим, например, был нажат Блог, вы должны добавить некоторые другие элементы списка. На этой странице объясняются операторы if else и else if: w3schools.com/js/js_if_else.asp Однако я думаю, что ваш код станет длинным и избыточным. Я настоятельно рекомендую вам узнать больше о том, как создать веб-страницу с помощью HTML, CSS и JavaScript. Доступно множество видео (coder-coder.com/learn-веб-разработка)

— 22.03.2022 15:35

21.03.2022 12:28