0
私の計画：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();
});
なぜこれが動作しませんか？コンソールにエラーは表示されません。
多分すべての記事が 'content' id内にあるためですか？
非常に清潔な溶液です。私はjsfiddleをうまくやってみました。自分のコードで試してみるとうまくいきません。これはまさに私のコードのようです：https://jsfiddle.net/7kd16e1b/6/（それは記事の要素を隠しています）が、クリックごとの記事を非表示/表示しません。 – user7186935
jqueryライブラリとmy jsコードを含む要素をbody要素の末尾に配置することで修正しました。ご協力いただきありがとうございます。 – user7186935
@ user7186935、np、喜んで助けてください！ （何が間違っているのか分かりませんでした。 Btw、jsfiddleでは、jqueryはデフォルトでロード時に実行されるため、doc.readyラッパーを記述する必要はありません。 – sinisake