当我使用js单击按钮时，如何隐藏表？

Question

首先，“视图”页面只显示两个按钮:剩余和出勤率。当我单击“离开”按钮时，我再次显示表(Tb2).and，然后单击该按钮，它隐藏了表

​

当我单击考勤时，我显示另一个表(Tb3).it与前一个表相同

​

现在对我来说，我想当我点击离开按钮时，打开的考勤表应该关闭，考勤按钮也是一样的。

我的代码：

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show')

};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show')
};

Answer 1

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show');

   document.getElementById('tb3').classList.remove('show');


};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show');

document.getElementById('tb2').classList.remove('show')

};

显式地删除类

Answer 2

使用JQuery，这将使事情变得简单。

​

$('#btnLeave').click(function(){
   if($('#tblLeave').css('display')=='none'){
      $('#tblLeave').css('display','block');
   } else {
      $('#tblLeave').css('display','none');
   }
});

$('#btnAttendance').click(function(){
   if($('#tblAttendance').css('display')=='none'){
      $('#tblAttendance').css('display','block');
   } else {
      $('#tblAttendance').css('display','none');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>

<br><br>
<table id="tblLeave" style="border: 1px solid; width: 100%; display: none">
  <thead>
    <td>Leave<td>
  </thead>
<table>
<br>
<table id="tblAttendance" style="border: 1px solid; width: 100%; display: none">
  <thead>
    <td>Attendance<td>
  </thead>
<table>

​

或者交替显示和隐藏两张表

​

$('#btnLeave').click(function(){
   if($('#divLeave').css('display')=='none'){
      $('#divLeave').css('display','block');
      $('#divAttendance').css('display','none');
   }
});

$('#btnAttendance').click(function(){
   if($('#divAttendance').css('display')=='none'){
      $('#divAttendance').css('display','block');
      $('#divLeave').css('display','none');
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>

<br><br>
<div id="divLeave">
  <table id="tblLeave" style="border: 1px solid; width: 100%;">
    <thead>
      <td>Leave<td>
    </thead>
  </table>
</div>
<br>
<div id="divAttendance" style="display: none; position: absolute; top: 47px; width: 100%">
  <table id="tblAttendance" style="border: 1px solid; width: 100%">
    <thead>
      <td>Attendance<td>
    </thead>
  </table>
</div>

​