所以我有一个链接列表，点击其中一个div应该显示内容，这很容易，但我的解决方案不起作用，想法？
此外，我对这个内容进行了评论，因为我不确定我需要这个因为我已经隐藏并通过更改他们的css类来显示div，（对吧？）
// $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?..
/* Service Panel - toggle */
(function($) {
$(document).ready(function() {
$(document).ready(function() {
// $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?..
$('#family-law-item').click(function() {
$(".hide-other-desc").css({
"display": "none"
});
$(".family-law-desc").css({
"display": "block"
});
});
$('#stock').click(function() {
$(".hide-other-desc").css({
"display": "none"
});
$(".criminal-law-desc").css({
"display": "block"
});
});
$('#workshop').click(function() {
$(".hide-other-desc").css({
"display": "none"
});
$(".corporate-law-desc").css({
"display": "block"
});
});
$('#all-courses').click(function() {
$(".hide-other-desc").css({
"display": "none"
});
$(".international-law-desc").css({
"display": "block"
});
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="services-panel">
<nav class="services-items">
<li id="family-law-item"><a href="#"> Family Law</a></li>
<li id="criminal-law-item"><a href="#"> Criminal Law</a></li>
<li id="corporate-law-item"><a href="#"> Corporate Law</a></li>
<li id="international-law-item"><a href="#"> International Law</a></li>
</nav>
<div class="service-desc-wrap">
<article id="family-law-desc hide-other-desc">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="criminal-law-desc hide-other-desc">
bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="corporate-law-desc hide-other-desc">
ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="international-law-desc hide-other-desc">
ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
</div>
</section>
答案 0 :(得分：2)
.hide()和.show()。id代码的HTML中将class更改为article。每个元素只应有一个id，而entire document id应该是唯一的。
(function($) {
$('#family-law-item').click(function() {
$(".hide-other-desc").hide();
$(".family-law-desc").show();
});
$('#criminal-law-item').click(function() {
$(".hide-other-desc").hide();
$(".criminal-law-desc").show();
});
$('#corporate-law-item').click(function() {
$(".hide-other-desc").hide();
$(".corporate-law-desc").show();
});
$('#international-law-item').click(function() {
$(".hide-other-desc").hide();
$(".international-law-desc").show();
});
}(jQuery));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="services-panel">
<nav class="services-items">
<li id="family-law-item"><a href="#"> Family Law</a></li>
<li id="criminal-law-item"><a href="#"> Criminal Law</a></li>
<li id="corporate-law-item"><a href="#"> Corporate Law</a></li>
<li id="international-law-item"><a href="#"> International Law</a></li>
</nav>
<div class="service-desc-wrap">
<article class="family-law-desc hide-other-desc">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article class="criminal-law-desc hide-other-desc">
bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article class="corporate-law-desc hide-other-desc">
ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article class="international-law-desc hide-other-desc">
ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
</div>
</section>
对于.toggleClass()，它的工作原理如下：
if the element does not have the class:
add the class
if the element already has the class:
remove the class
答案 1 :(得分：0)
您可以尝试以下代码：
<div id="dataDiv">
<p>Hello How are you?</p>
</div>
<script>
function toggle()
{
$('#dataDiv').toggle();
}
</script>
答案 2 :(得分：0)
现在，您可以尝试以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
$('.services-items a').click(function(){
$('.service-desc-wrap article').hide();
$($(this).attr('href')).show();
return false
})
})
<body>
<style>
.hide { display:none;}
</style>
<section class="services-panel">
<nav class="services-items">
<li id="family-law-item"><a href="#family-law-desc"> Family Law</a></li>
<li id="criminal-law-item"><a href="#criminal-law-desc"> Criminal Law</a></li>
<li id="corporate-law-item"><a href="#corporate-law-desc"> Corporate Law</a></li>
<li id="international-law-item"><a href="#international-law-desc"> International Law</a></li>
</nav>
<div class="service-desc-wrap">
<article id="family-law-desc">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="criminal-law-desc" class="hide">
bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="corporate-law-desc" class="hide">
ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
<article id="international-law-desc" class="hide">
ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</article>
</div>
</section>
</body>
</html>