我的计划：
一个菜单项（挂钩到我的内容部门中的文章）。最初所有文章都是隐藏的。但是当选择菜单项时，内容分割应该仅显示与命中菜单项对应的文章。其他菜单项也是如此。
我是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();
});
为什么这不起作用？控制台不会显示任何错误。
也许是因为每篇文章都在＆＃39;内容＆＃39; ID ？
答案 0 :(得分：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>
答案 1 :(得分：1)
以前回答的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();
});