Javascript：切换类添加或删除答案

【问题标题】：Javascript: toggle class add or removeJavascript：切换类添加或删除
【发布时间】：2015-12-24 06:42:55
【问题描述】：

我要做的是：当我点击邮件按钮时，第一个表将出现并隐藏第二个表，当按下订阅者按钮时，第二个表必须出现并隐藏第一个表。但是我遇到了一些错误，比如当我按下第二个按钮时它不会隐藏第一个表

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

【问题讨论】：

您是否在页面加载时看到两个表？？
知道了，你正在使用引导程序，所以它会没事的。但是您的代码运行良好。
从代码看来@Ahmad 您正在使用引导程序？对吗？
是的，我正在使用引导程序。现在，代码运行良好。
谢谢大家：]

标签： javascript php jquery toggle

【解决方案1】：

使用这个，它正在工作......

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

【讨论】：

如果你使用隐藏类，那么使用.setAttribute("class", "hidden") 和.removeAttribute("class","hidden");