更新
使用@Joe和@divakar代码并将它们组合在一起，下面是更新后的简化代码！谢谢你们！
JAVASCRIPT
$(document).ready(function() {
$('.mod1').show();
$('.circle').click(function() {
$('.circle').addClass('circle_active');
$('.hide').hide();
var id = $(this).attr('id');
$(this).addClass('circle_active') // add the active class to the clicked link
.siblings().removeClass('circle_active'); // remove the active class from the other links
$('.' + id).show();
});
});
CSS
.hide {
display: none;
}
HTML
<div class="content" id="panel2">
<div class="row right">
<div class='small-12 medium-12 large-12 columns'>
<a id="mod1" class="circle">1</a>
<a id="mod2" class="circle">2</a>
<a id="mod3" class="circle">3</a>
<a id="mod4" class="circle">4</a>
<a id="mod5" class="circle">5</a>
</div>
</div>
<div class="mod1 hide">
<p>Module 1</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod2 hide">
<p>Module 2</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (B)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod3 hide">
<p>Module 3</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (C)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod4 hide">
<p>Module 4</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (D)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
我是编写javascript的初学者（正如您在下面的代码中看到的那样！）。我写了一些非常粗略的代码，使用show / hide来显示不同的div元素。这一切都正常，但我知道这不是最好的方法。目前我有4个显示和隐藏的div，但是会有20个，如果我这样做的话会有很多代码。
我知道有一种更好的编码方式，但我的谷歌搜索并没有太多帮助。我是这方面的初学者，所以如果有人可以帮助解释一个更好的方法，那将是非常感激的。我不知道使用数组或循环是如何做到的，但我不知道从哪里开始。你可以看到我的代码多次重复，我想知道是否有更简单的方法可以做到这一点？
JAVASCRIPT
$(document).ready(function(){
$('#mod1').removeClass('circle_active');
$('#mod2').removeClass('circle_active');
$('#mod3').removeClass('circle_active');
$('#mod4').removeClass('circle_active');
$('#module1').show();
$('#module2').hide();
$('#module3').hide();
$('#module4').hide();
$('#mod1').click(function(){
$('#mod1').addClass('circle_active');
$('#mod2').removeClass('circle_active');
$('#mod3').removeClass('circle_active');
$('#mod4').removeClass('circle_active');
$('#module1').show();
$('#module2').hide();
$('#module3').hide();
$('#module4').hide();
});
$('#mod2').click(function(){
$('#mod1').removeClass('circle_active');
$('#mod2').addClass('circle_active');
$('#mod3').removeClass('circle_active');
$('#mod4').removeClass('circle_active');
$('#module1').hide();
$('#module2').show();
$('#module3').hide();
$('#module4').hide();
});
$('#mod3').click(function(){
$('#mod1').removeClass('circle_active');
$('#mod2').removeClass('circle_active');
$('#mod3').addClass('circle_active');
$('#mod4').removeClass('circle_active');
$('#module1').hide();
$('#module2').hide();
$('#module3').show();
$('#module4').hide();
});
$('#mod4').click(function(){
$('#mod1').removeClass('circle_active');
$('#mod2').removeClass('circle_active');
$('#mod3').removeClass('circle_active');
$('#mod4').addClass('circle_active');
$('#module1').hide();
$('#module2').hide();
$('#module3').hide();
$('#module4').show();
});
});
HTML
<div class="content" id="panel2">
<div class="row right">
<div class='small-12 medium-12 large-12 columns'>
<a id="mod1" class="circle">1</a>
<a id="mod2" class="circle">2</a>
<a id="mod3" class="circle">3</a>
<a id="mod4" class="circle">4</a>
</div>
</div>
<div id="module1">
<p>Module 1</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="module2">
<p>Module 2</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (B)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="module3">
<p>Module 3</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (C)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="module4">
<p>Module 4</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (D)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
答案 0 :(得分：1)
我不知道#module元素，因为我在HTML中看不到它们，但对于#mod元素，你可以做类似的事情
$("a").click(function (e) {
$(this)
.addClass("circle_active")
.siblings()
.removeClass("circle_active");
});
答案 1 :(得分：1)
如果您可以将HTML标记更改为以下内容：
<a id="mod1" data-module="1" class="circle">1</a>
<a id="mod2" data-module="2" class="circle">2</a>
<div id="module1" class="module">
<div id="module2" class="module">
然后你可以这样做：
$('#panel').on('click', '.circle', function() {
$(this).addClass('circle_active') // add the active class to the clicked link
.siblings().removeClass('circle_active'); // remove the active class from the other links
$('div.module').hide(); // hide all module divs
$('#module' + $(this).data('module')).show(); // show the one that the data-module attribute relates to
});
如果您不想更改HTML，这应该有效：
$('#panel').on('click', '.circle', function() {
$(this).addClass('circle_active') // add the active class to the clicked link
.siblings().removeClass('circle_active'); // remove the active class from the other links
$('panel').find('div[id^=module]').hide(); // hide all divs whose id starts with "module"
$('#module' + $(this).attr('id').replace('mod', '')).show(); // show the one that the this link's id relates to
});
代码稍慢（[^=]是一个昂贵的选择器）并且与HTML紧密耦合（期望链接ID为#modN而不是仅仅期待{{1} }），但应该工作。
答案 2 :(得分：0)
请运行此并查看。我希望这是你的期望。
$(document).ready(function() {
$('.mod1').show();
$('.circle').click(function() {
$('.hide').hide();
var id = $(this).attr('id');
$(this).add('circle_active');
$('.' + id).show();
});
});.hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content" id="panel2">
<div class="row right">
<div class='small-12 medium-12 large-12 columns'>
<a id="mod1" class="circle">1</a>
<a id="mod2" class="circle">2</a>
<a id="mod3" class="circle">3</a>
<a id="mod4" class="circle">4</a>
</div>
</div>
<div class="mod1 hide">
<p>Module 1</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod2 hide">
<p>Module 2</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod3 hide">
<p>Module 3</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mod4 hide">
<p>Module 4</p>
<table class="footable">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">No.</th>
<th>Question Text</th>
<th>Answer Text</th>
<th>Tally</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Is this a training question (A)?</td>
<td>
<p>A1. Incorrect</p>
<p>A2. Incorrect</p>
<p class="correctAnswer">A3. Correct</p>
<p>A4. Incorrect</p>
</td>
<td>
<div id="progress">
<span id="percent" style="left:50%;">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
<div id="progress">
<span id="percent">50%</span>
<div id="bar"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>