在选项卡下而不是在选项卡上显示信息 - 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>