Javascript显示/隐藏多个div简化

Question

UPDATE

Using both @Joe and @divakar code and combining them together, below is the updated simplified code which works! Thanks guys!

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>

I'm a beginner at writing javascript (as you can see with my code below!). I have written some very rough code which uses show/hide to display different div elements. It is all working correctly, but I know it's not the best way to do it. At the moment I have 4 divs which show and hide, but there's going to be 20 and that's going to be a lot of code if I do it this way.

I know that there's a better way of coding this, but my google search hasn't helped too much. I'm a beginner at this, so if someone could help explain what a better way of doing it is, it would be much appreciated. I don't know whether using arrays or loops is how to do it, but I'm not sure where to start. As you can see my code is duplicated many times and I was wondering if there was a simpler way of doing this?

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

I don't know about the #module elements because I don't see them in your HTML, but for the #mod elements, you can do something like

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

Answer 2

If you can change your HTML markup to something like this:

<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">

You can then do something like this:

$('#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
});

---

If you don't want to change your HTML, this should work:

$('#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
});

The code is slightly slower ( [^=] is an expensive selector) and a little bit more tightly coupled to the HTML (expecting the link ID to be #modN as opposed to just expecting data-module="N" ), but should work.

Answer 3

Please run this and see. i Hope this is what you expected.

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