Question

更新

使用@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>

Answer 1

我不知道#module元素，因为我在HTML中看不到它们，但对于#mod元素，你可以做类似的事情

$("a").click(function (e) {
    $(this)
        .addClass("circle_active")
        .siblings()
            .removeClass("circle_active");
});

Answer 2

如果您可以将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} }），但应该工作。

Answer 3

请运行此并查看。我希望这是你的期望。

 $(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简化

3 个答案: