jQuery的內容控制器不顯示和隱藏內容正確

我一直試圖讓過去幾天一個導航欄，但我似乎遇到了很多與它的問題。現在我的問題是jQuery的，它不工作我希望它的方式：jQuery的內容控制器不顯示和隱藏內容正確

我想在一個頁面的網站，所以每當我點擊導航欄中的當前頁面應該隱藏和目標頁面應該顯示。現在，有些頁面仍然堆疊在彼此之上，有人可以幫我嗎？

HTML代碼

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Yu-Gi-Oh! Stash</title> 
     <link rel="stylesheet" type="text/css" href="styles/style.css"> 
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
     <script src="scripts/contentcontroller.js"></script> 
     <script src="scripts/navbar.js"></script> 
     <meta charset="utf-8"> 
    </head> 

    <body>   
     <section> 
      <nav> 
       <ul> 
        <li class="active"><a href="#decks">Decks &blacktriangledown;</a> 
         <ul> 
          <li><a href="#decks_starter-decks">Starter Decks</a></li> 
          <li><a href="#decks_structure-decks">Structure Decks</a></li> 
         </ul> 
        </li> 

        <li><a href="#booster-packs">Booster Packs &blacktriangledown;</a> 
         <ul> 
          <li><a href="#booster-packs_booster-sets">Booster Sets</a></li> 
          <li><a href="#booster-packs_special-edition">Special Editions</a></li> 
          <li><a href="#booster-packs_duelist-packs">Duelist Packs</a></li> 
          <li><a href="#booster-packs_master-collections">Master Collections</a></li> 
         </ul> 
        </li> 

        <li><a href="#torunament-awards">Tournament Awards</a></li> 

        <li><a href="#promotions">Promotions &blacktriangledown;</a> 
         <ul> 
          <li><a href="#promotions_video-games">Video Games</a></li> 
          <li><a href="#promotions_entertainments">Entertainment</a></li> 
          <li><a href="#promotions_foundations">Foundations</a></li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 

      <section id="decks" class="tab-content active"> 
       <h1 class="page-heading">Decks</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="decks_starter-decks" class="tab-content hide"> 
       <h1 class="page-heading">Starter Decks</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="decks_structure-decks" class="tab-content hide"> 
       <h1 class="page-heading">Structure Decks</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="booster-packs" class="tab-content hide"> 
       <h1 class="page-heading">Booster Packs</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="booster-packs_booster-sets" class="tab-content hide"> 
       <h1 class="page-heading">Booster Sets</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="booster-packs_special-edition" class="tab-content hide"> 
       <h1 class="page-heading">Special Edition</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="booster-packs_duelist-packs" class="tab-content hide"> 
       <h1 class="page-heading">Duelist Packs</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="booster-packs_master-collections" class="tab-content hide"> 
       <h1 class="page-heading">Master Collections</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="torunament-awards" class="tab-content hide"> 
       <h1 class="page-heading">Tournament Awards</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="promotions" class="tab-content hide"> 
       <h1 class="page-heading">Promotions</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="promotions_video-games" class="tab-content hide"> 
       <h1 class="page-heading">Video Game Promotions</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="promotions_entertainments" class="tab-content hide"> 
       <h1 class="page-heading">Magazine, Movie & McDonalds Promotions</h1> 

       <p>lorem ipsum..</p> 
      </section> 

      <section id="promotions_foundations" class="tab-content hide"> 
       <h1 class="page-heading">Foundations</h1> 

       <p>lorem ipsum..</p> 
      </section> 
     </section> 

     <footer> 
     </footer> 
    </body> 
</html>

CSS代碼

body, html { 
    padding: 0; 
    margin: 0; 
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

p { 
    padding: 0; 
    margin: 35px 25px 25px 25px; 
} 

h1, h2, h3, h4, h5, h6 { 
    margin-top: 0; 
    margin-bottom: 0; 
    text-transform: capitalize; 
} 

section { 
    padding: 0; 
    margin: auto; 
    width: 85%; 
    height: 1000px; 
    border-top: 1px solid #fff; 
} 

section section { 
    border: none; 
} 

.page-heading { 
    margin: 80px 0px 80px 0px; 
    text-align: center; 
    font-weight: 700; 
    font-size: 25px; 
    line-height: 32px; 
    color: #06b; 
} 

/******************** 
***NAVIGATION BAR*** 
********************/ 
nav { 
    position: fixed; 
    width: inherit; 
    margin: -1px 0px 0px -1px; 
    list-style-type: none !important; 
    background-color: #fff; 
    border: 1px solid #aaa; 
    border-top: none; 

    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-bottom-right-radius: 5px; 
} 

nav:after { 
    clear: both; 
} 

nav ul { 
    list-style: none; 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 8px; 
    padding-bottom: 0; 
} 

nav ul li { 
    width: auto; 
    position: relative; 
    float: left; 
    margin: 0 25px -1px 0; 
    padding: 0; 
} 

nav ul li.active > a { 
    color: #06b; 
    border-color: #aaa #aaa #fff; 
} 

nav ul li:hover > a { 
    background: #fff; 
    border-color: #aaa #aaa #fff; 
} 

nav ul a:link, a:visited { 
    display: block; 
    color: #09c; 
    text-decoration: none; 
    text-transform: capitalize; 
    font-weight: 600; 
    font-size: 15px; 
    line-height: 32px; 
    margin: 0; 
    padding: 0 15px; 
    border: 1px solid; 
    border-color: #eee #eee transparent; 

    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
} 

nav ul ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background: #fff; 
    padding: 0; 
} 

nav ul ul li { 
    float: none; 
    width: 150%; 
    margin: 0; 
    background-color: #fff; 
} 

nav ul ul a { 
    line-height: 120%; 
    padding: 10px 15px; 
    border-top: none; 
    border-color: #eee !important; 

    -webkit-border-radius: 0px !important; 
    -moz-border-radius: 0px !important; 
    border-radius: 0px !important; 
} 

nav ul ul a:hover { 
    border-color: #aaa !important; 
} 

nav ul ul ul { 
    top: 0; 
    left: 100%; 
} 

nav ul li:hover > ul { 
    display: block; 
} 

/************* 
***CONTENT*** 
*************/ 
.tab-content.active { 
    display: block; 
} 

.tab-content.hide { 
    display: none; 
}

jQuery代碼

/*************************** 
***Navbar click function*** 
***************************/ 
$(document).ready(function() { 
    $('nav li > a').click(function(event) { 
     event.preventDefault(); 

     //declare current tab content 
     var current_tab_content = $('nav li.active > a').attr('href'); 

     //hide current tab content 
     $(current_tab_content).removeClass('active').addClass('hide'); 

     //show targeted tab content 
     var targeted_tab_content = $(this).attr('href'); 
     $(targeted_tab_content).removeClass('hide').addClass('active'); 

     //remove 'active' from current navbar 
     var current_navbar = $('nav li.active'); 
     $(current_navbar).removeClass('active'); 

     //add 'active' to clicked navbar 
     $(this).parents('li').last().addClass('active'); 
    }); 
});

來源

2015-06-23 Kim Jørgensen

如果您在下拉菜單中選擇頁面高於上一頁的頁面，則會突出顯示頁面堆棧。例如，如果您在「Structure Decks」上並單擊「Starter Decks」。 –

看起來你點擊後，結束了與類 '主動' 多個節導航幾次。

試着隱藏所有部分，然後再出所需的一個，而不是在一個時間躲在一個標籤：

$('.tab-content').removeClass('active').addClass('hide'); 
$(targeted_tab_content).addClass('active').removeClass('hide');

其他建議

你可能只有一個類而不是兩個，默認設置爲display: none;，然後您只需刪除/分配「活動」類。
還爲show()和hide()可能有用這裏jQuery的功能。

來源

2015-06-23 22:39:23 spanndemic

你是對的，你的解決方案几乎爲我做了。爲了使它工作，我刪除了所有.tab內容中的'active'，並同時向所有.tab內容添加'hide'，然後它就起作用了！謝謝 –

不客氣，很高興幫助！ – spanndemic

jQuery的內容控制器不顯示和隱藏內容正確

回答

相關問題