Javascript显示/隐藏多个div简化
[英]Javascript show/hide multiple divs simplified
问题描述
更新
同时使用@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个div，如果我这样做的话，将会有很多代码。
我知道有一种更好的编码方式，但是我的Google搜索并没有太大帮助。 我是一个初学者，所以如果有人可以帮助解释什么是更好的方法，将不胜感激。 我不知道使用数组还是循环是怎么做的，但是我不确定从哪里开始。 如您所见，我的代码被重复很多次，我想知道是否有更简单的方法？
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>
3 个解决方案
解决方案1
1 2014-09-26 08:34:37
我不知道#module元素，因为在您的HTML中看不到它们，但是对于#mod元素，您可以执行以下操作
$("a").click(function (e) {
$(this)
.addClass("circle_active")
.siblings()
.removeClass("circle_active");
});
解决方案2
1 2014-09-26 08:35:57
如果您可以将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 ，而不是仅期望data-module="N" ），但是应该工作。
解决方案3
0 已采纳 2014-09-26 08:48:19
请运行此看看。 我希望这是您所期望的。
$(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>
javascript函数显示/隐藏多个div，第一个div可见
[英]javascript function show / hide multiple divs with first div visible
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.