Javascript：切换类的添加或删除

Question

What I am going to do is: When i click on mails button, 1st table is going to appear and hide the second table and when subscribers button is pressed, 2nd table has to appear and hide the 1st table. But I am facing bugs like when i pressed 2nd button it will not hide the 1st table

<script>
    function toggle_display(id){
        if(id=='mails'){
            document.getElementById('mails').classList.remove('hidden');
            document.getElementById('subscribers').classList.add('hidden');
        }
        if(id=='subscribers'){
            document.getElementById('mails').classList.add('hidden');
            document.getElementById('subscribers').classList.remove('hidden');
        }
}</script>

<a href="javascript:toggle_display('mails');"><input type="button" class="btn" value="Mails"/></a>
<a href="javascript:toggle_display('subscribers');"><input type="button" class="btn" value="Subscribers"/></a>

        <div class="row well well-lg hidden" id="mails">
               <table class="col-sm-12" border="1px solid black">
               <tr>
                    <th class="col-sm-2">Name</th>
                    <th class="col-sm-2">Email</th>
                    <th class="col-sm-2">Phone</th>
                    <th class="col-sm-2">Subject</th>
                    <th class="col-sm-3">Message</th>
               </tr>
               </table>
          </div>

          <div class="row well well-lg hidden" id="subscribers">
              <table class="col-sm-12" border="1px solid black">
                   <tr>
                      <th class="col-sm-2">ID</th>
                      <th class="col-sm-5">Email</th>
                      <th class="col-sm-3">Action</th>
                   </tr>
              </table>
          </div>

Answer 1

Use this,, It is working...

 <script> function toggle_display(id){ if(id=='mails'){ document.getElementById('mails').style.display = 'block'; document.getElementById('subscribers').style.display = 'none'; } if(id=='subscribers'){ document.getElementById('mails').style.display = 'none'; document.getElementById('subscribers').style.display = 'block'; } }</script> <input type="button" class="btn" onclick="toggle_display('mails');" value="Mails"/> <input type="button" class="btn" value="Subscribers" onclick="toggle_display('subscribers');"/> <div class="row well well-lg hidden" id="mails"> <table class="col-sm-12" border="1px solid black"> <tr> <th class="col-sm-2">Name</th> <th class="col-sm-2">Email</th> <th class="col-sm-2">Phone</th> <th class="col-sm-2">Subject</th> <th class="col-sm-3">Message</th> </tr> </table> </div> <div class="row well well-lg hidden" id="subscribers"> <table class="col-sm-12" border="1px solid black"> <tr> <th class="col-sm-2">ID</th> <th class="col-sm-5">Email</th> <th class="col-sm-3">Action</th> </tr> </table> </div>