jquery特定id文章內容不顯示

菜單項（與我的內容分部中的文章相關）。最初所有的文章都是隱藏的。但是，當選擇一個菜單項時，內容分區應該只顯示與命中菜單項相對應的文章。其他菜單項目也是如此。

我是JS的新手。我無法弄清楚爲什麼單獨的文章不會顯示。隱藏一切的第一個功能最初工作。

我的html代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Hartmeting</title> 

     <link rel="stylesheet" href="css/stylesheet.css" type="text/css"> 
     <script src="js/jquery-3.1.1.js" type='text/javascript'></script> 
     <script src="js/scripts.js" type='text/javascript'></script> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <header id="titel"> 
       <h1>Heartmeasurement</h1> 
      </header> 

      <!-- Menu --> 
      <nav id="menu"> 
       <ul> 
        <li><a href="#menu_a">Introduction</a></li> 
        <li><a href="#menu_b">The Problem</a></li> 
        <li><a href="#menu_c">The Manual</a></li> 
        <li><a href="#menu_c">Measuring the heart</a></li> 
       </ul> 
      </nav> 

      <!-- The Articles --> 
      <div id="content"> 
       <!-- Intro Article --> 
       <article id="menu_a"> 
        <h2>Introduction</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="Intro img"/> 
        </figure> 
        <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
       </article> 

       <!-- Article 1 --> 
       <article id="menu_b"> 
        <h2>The Problem</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="First img"/> 
        </figure> 
        <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
       </article> 

       <!-- Article 2 --> 
       <article id="menu_c"> 
        <h2>The Manual</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="Second Article"/> 
        </figure> 
        <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
       </article> 

       <!-- Article 3 --> 
       <article id="menu_d"> 
        <h2>Measuring Your Heart</h2> 
        <figure> 
         <img src="http://placehold.it/150x150" , alt="Third img"/> 
        </figure> 
        <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
       </article> 
      </div> 

      <footer> 
       <a href="#wrapper"> To the Top </a> 
      </footer> 
     </div> 
    </body> 
</html>

我的js代碼：

$(document).ready(function() { 
    $('#content').hide(); 
}); 

var visible = $('#menu_a').first(); 
//visible.show(); this was a test and it did NOT work!!!!!! 

var show_me = function(article){ 
    visible.hide(); 
    visible = article; 
    visible.show(); 
} 

$("#menu_a").click(function(event) { 
    var id_of_article = $(this).attr('href'); 
    var the_article = $(id_of_article); 
    show_me(the_article); 
    even.preventDefault(); 
});

爲什麼這個不行？控制檯不顯示任何錯誤。

也許是因爲每篇文章都在「內容」ID範圍內？

來源

2016-11-20 user7186935

CSS的解決方案是非常好的，但如果你想使用jQuery，這裏是jQuery版本。

你已經過分複雜了，是的 - 主要問題之一是你的內容/容器，保存文章，總是隱藏。爲了解決這個問題，隱藏物品，而：

article { 
    display:none; 
}

和簡化的JQuery：

$("#menu ul li a").click(function() { 

var id_of_article = $(this).attr('href'); 
$('article').not($(id_of_article)).hide(); 
$(id_of_article).show(); 

even.preventDefault(); 


});

演示：https://jsfiddle.net/7kd16e1b/1/

來源

2016-11-20 23:38:38 sinisake

非常整潔的解決方案。我試着jsfiddle工作得很好。如果我在自己的代碼中嘗試它，它不起作用。這正是我的代碼的樣子：https://jsfiddle.net/7kd16e1b/6/（它確實隱藏了文章元素），但它不會隱藏/顯示每次點擊的文章。 – user7186935

我通過將包含jquery庫和我的js代碼的2

絕對沒有理由爲此使用JS。

你可以這樣做只是使用CSS：

（哦，順便說一句和您的JS不工作的原因是因爲你隱藏了整個父容器，然後嘗試顯示隱藏的容器內的東西）。這將是相當明顯的，如果你看着你的瀏覽器的開發工具，同時點擊菜單中的鏈接）從以前的答案

article { 
 
    display: none; 
 
    } 
 
[id^=menu_]:target { 
 
    display: block; 
 
    }

<div id="wrapper"> 
 
       <header id="titel"> 
 
        <h1>Heartmeasurement</h1> 
 
       </header> 
 

 
         <!-- Menu --> 
 
         <nav id="menu"> 
 
         <ul> 
 

 
          <li><a href="#menu_a">Introduction</a></li> 
 
          <li><a href="#menu_b">The Problem</a></li> 
 
          <li><a href="#menu_c">The Manual</a></li> 
 
          <li><a href="#menu_c">Measuring the heart</a></li> 
 
         </ul> 
 

 
         </nav> 
 

 
          <!-- The Articles --> 
 
          <div id="content"> 
 

 
            <!-- Intro Article --> 
 
            <article id="menu_a"> 
 
             <h2>Introduction</h2> 
 
              <figure> 
 
               <img src="http://placehold.it/150x150" , alt="Intro img"/> 
 
              </figure> 
 
              <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
 
            </article> 
 

 
            <!-- Article 1 --> 
 

 
            <article id="menu_b"> 
 
             <h2>The Problem</h2> 
 
              <figure> 
 
               <img src="http://placehold.it/150x150" , alt="First img"/> 
 
              </figure> 
 
              <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
 
            </article> 
 

 
            <!-- Article 2 --> 
 

 
            <article id="menu_c"> 
 
             <h2>The Manual</h2> 
 
              <figure> 
 
               <img src="http://placehold.it/150x150" , alt="Second Article"/> 
 
              </figure> 
 
              <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
 
            </article> 
 

 
            <!-- Article 3 --> 
 

 
            <article id="menu_d"> 
 

 
             <h2>Measuring Your Heart</h2> 
 
              <figure> 
 
               <img src="http://placehold.it/150x150" , alt="Third img"/> 
 
              </figure> 
 
              <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> 
 

 
            </article> 
 

 
          </div> 
 

 
       <footer> 
 
        <a href="#wrapper"> To the Top </a> 
 
       </footer> 
 

 
      </div>

來源

2016-11-20 23:29:41 junkfoodjunkie

謝謝！我會堅持使用js，因爲我正在努力學習js。 – user7186935

相關問題

jquery特定id文章內容不顯示

回答

相關問題