在選項卡下而不是在選項卡上顯示信息 - HTML/CSS

Question

我介紹了這個 html、css 和腳本來顯示我們的食物類別。 但是，單擊時信息是在每個選項卡上方而不是下方打開的，我該如何更改？

我相信這是 javascript 中需要更改的內容。

 <script> function openCity(cityName, elmnt, color) { // Hide all elements with class="tabcontent" by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Show the specific tab content document.getElementById(cityName).style.display = "block"; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script>

 /* Style the tab buttons */.tablink { background-color: #4A5243; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font: default; width: 25%; height: 25%; } /* Change background color of buttons on hover */.tablink:hover { background-color: #E8E1D6; } /* Set default styles for tab content */.tabcontent { color: #221F21; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #Tringalings {background-color:#white;} #Burgers {background-color:#white;} #Salads {background-color:#white;} #KidsMenu {background-color:#white;}

 <div id="Tringalings" class="tabcontent"> <h1>Tringalings</h1> <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p> <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p> </div> <div id="Burgers" class="tabcontent"> <h1>Burgers</h1> <p>Paris is the capital of France.</p> </div> <div id="Salads" class="tabcontent"> <h1>Salads</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id="KidsMenu" class="tabcontent"> <h1>Kids Menu</h1> <p>Oslo is the capital of Norway.</p> </div> <button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button> <button class="tablink" onclick="openCity('Burgers', this, '#E8E1D6')"id="defaultOpen">Burgers</button> <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">Salads</button> <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button>

非常感謝對此問題的任何支持。

謝謝！

Answer 1

您需要將詳細信息 HTML 移動到菜單 HTML 之后，以便它可以顯示在菜單之后。

<button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">
      Tringalings
    </button>
    <button
      class="tablink"
      onclick="openCity('Burgers', this, '#E8E1D6')"
      id="defaultOpen"
    >
      Burgers
    </button>
    <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">
      Salads
    </button>
    <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">
      Kids Menu
    </button>
    <div id="Tringalings" class="tabcontent">
      <h1>Tringalings</h1>
      <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p>
      <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p>
    </div>

    <div id="Burgers" class="tabcontent">
      <h1>Burgers</h1>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Salads" class="tabcontent">
      <h1>Salads</h1>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <div id="KidsMenu" class="tabcontent">
      <h1>Kids Menu</h1>
      <p>Oslo is the capital of Norway.</p>
    </div>

工作示例位於https://codesandbox.io/s/quirky-taussig-bebf08

Answer 2

我將您的代碼段重寫為屏幕頂部的導航欄 position。

基本 HTML 布局（不使用框架）確實取決於元素的順序。

通常頁面頂部的導航欄 go 雖然情況並非總是如此，但對於您的簡單示例，我認為它有效。

 function openCity(cityName, elmnt, color) { // Hide all elements with class="tabcontent" by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Show the specific tab content document.getElementById(cityName).style.display = "block"; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();

 /* Style the tab buttons */.tablink { background-color: #4A5243; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 14px; font: default; width: 25%; height: 25%; } /* Change background color of buttons on hover */.tablink:hover { background-color: #E8E1D6; } /* Set default styles for tab content */.tabcontent { color: #221F21; display: none; padding: 50px; text-align: center; } /* Style each tab content individually */ #Tringalings { background-color: white; } #Burgers { background-color: white; } #Salads { background-color: white; } #KidsMenu { background-color: white; }.navbar { /* your navbar styles here */ }

 <div class="navbar"> <button class="tablink" onclick="openCity('Tringalings', this, '#E8E1D6')">Tringalings</button> <button class="tablink" onclick="openCity('Burgers', this, '#E8E1D6')" id="defaultOpen">Burgers</button> <button class="tablink" onclick="openCity('Salads', this, '#E8E1D6')">Salads</button> <button class="tablink" onclick="openCity('KidsMenu', this, '#E8E1D6')">Kids Menu</button> </div> <div id="Tringalings" class="tabcontent"> <h1>Tringalings</h1> <p><b>Mac Bites</b> w bacon bits, grated gruyere, and smoked BBQ sauce</p> <p><b>Spicy Popcorn Chicken</b> w togarashi mayo</p> </div> <div id="Burgers" class="tabcontent"> <h1>Burgers</h1> <p>Paris is the capital of France.</p> </div> <div id="Salads" class="tabcontent"> <h1>Salads</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id="KidsMenu" class="tabcontent"> <h1>Kids Menu</h1> <p>Oslo is the capital of Norway.</p> </div>