如何隱藏主頁div當點擊另一個標籤

我正在使用w3schools如何 - 製表符爲我的網站製作標籤。問題是，每當我點擊'Home'以外的標籤時，'Home'div仍然出現，另一個標籤的內容也出現在它下面。點擊其他選項卡時，如何隱藏主頁div，我只看到提到的選項卡的內容？如何隱藏主頁div當點擊另一個標籤

這裏是我的導航HTML代碼和JavaScript我使用：

<script type="text/javascript" > 
 
\t  function openTab(evt, tabName) { 
 
\t  // Declare all variables 
 
\t  var i, tabcontent, tablinks; 
 

 
\t  // Get all elements with class="tabcontent" and hide them 
 
\t  tabcontent = document.getElementsByClassName("tabcontent"); 
 
\t  for (i = 0; i < tabcontent.length; i++) { 
 
\t   tabcontent[i].style.display = "none"; 
 
\t  } 
 

 
\t  // Get all elements with class="tablinks" and remove the class "active" 
 
\t  tablinks = document.getElementsByClassName("tablinks"); 
 
\t  for (i = 0; i < tablinks.length; i++) { 
 
\t   tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
\t  } 
 

 
\t  // Show the current tab, and add an "active" class to the link that opened the tab 
 
\t  document.getElementById(tabName).style.display = "block"; 
 
\t  evt.currentTarget.className += " active"; 
 
\t \t } 
 
\t \t </script> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t 
 
\t \t </script>

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Ben and Lukes</a> 
 
     </div> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#intro" class="tablinks active" onclick="openTab(event, 'intro')">Home</a></li> 
 
      <li><a href="#About" class="tablinks" onclick="openTab(event, 'About')">About Us</a></li> 
 
      <li><a href="#Products" class="tablinks" onclick="openTab(event, 'Products')">Products</a></li> 
 
      <li><a href="#Contact" class="tablinks" onclick="openTab(event, 'Contact')">Contact Us</a></li> 
 
     </ul> 
 
     </div> 
 
    </nav>

來源

2016-09-20 PS97

簡化您的JS

openTab("Home") 

function openTab(tabName) { 
    var i; 
    var x = document.getElementsByClassName("tab"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    document.getElementById(tabName).style.display = "block"; 
}

然後HTML應該是這個樣子

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<ul class="w3-navbar w3-black"> 
    <li><a href="#" onclick="openTab('Home')">Home</a></li> 
    <li><a href="#" onclick="openTab('AboutUs')">About Us</a></li> 
    <li><a href="#" onclick="openTab('Products')">Products</a></li> 
    <li><a href="#" onclick="openTab('ContactUs')">Contact Us</a></li> 
</ul> 

<div id="Home" class="w3-container tab"> 
    <h2>Home</h2> 
    <p>Your Content Here</p> 
</div> 

<div id="AboutUs" class="w3-container tab"> 
    <h2>About Us</h2> 
    <p>Your Content Here</p> 
</div> 

<div id="Products" class="w3-container tab"> 
    <h2>Products</h2> 
    <p>Your Content Here</p> 
</div> 

<div id="ContactUs" class="w3-container tab"> 
    <h2>Contact Us</h2> 
    <p>Your Content Here</p> 
</div>

退房的Live CODEPEN here

來源

2016-09-20 02:39:24 Illdapt

我要澄清，磨片ñ我啓動我想要主頁出現的網站。主頁由一個簡單的div與容器/背景圖像等和圖像組成。隨後，當點擊一個標籤時，例如「關於我們」，我想讓「關於我們」標籤的內容出現，並且「主頁」頁面內容消失。 – PS97

你檢查出筆嗎？那不是你的意思？ – Illdapt

我的歉意，我只是做了，而這正是我正在尋找的，我會嘗試使用您的代碼再次建模。我可能必須完全轉儲我的代碼並重新構建框架。我會讓你知道它是怎麼回事:) – PS97

嘗試使用一些jQuery的：

$(".otherTab").click(function(){ 
     $('.homeTab').hide(); 
     $('.otherTab').show(); 
});

來源

2016-09-20 02:23:33 Kylar

，如果你不想使用jQuery的你可以使用ng-switch directive。你會在控制器上有一些狀態，如displayTab = 0。然後點擊標籤上會改變那塊狀態，然後NG-開關會顯示正確的選項卡

來源

2016-09-20 02:26:48 Jake

如何隱藏主頁div當點擊另一個標籤

回答

相關問題