如何讓我的回傳（功能）按鈕作業？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;
}

文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。文字填充物。出于某種原因，我不得不這樣做，否則我根本無法發布此插頁。我很抱歉。

uj5u.com熱心網友回復：

因此，我查看了您的代碼，但它有點多余，因此難以管理。因此，我對其進行了一些更改并設法實作了您的目標。看下面的代碼片段：

<!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 個用于動態生成新串列項的引數。每個都將包含一個帶有新的 reverseToggle 函式的 onclick 事件偵聽器，該函式將回傳原始內容。當點擊第一個“toggle”函式時，按鈕也會出現，并且該按鈕有一個事件監聽器，它也鏈接到 reverseToggle 函式。我確信仍然有更好的方法來實作這一點，但這有效并且代碼已經更干凈了。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445776.html

標籤：javascript html css

上一篇：使用useEffectHook過濾表資料導致組件無限重新渲染

下一篇：Redux沒有在反應中更新狀態