我要做的是:
当我单击“邮件”按钮时,第一个表将出现并隐藏第二个表,而按“订户”按钮时,第二个表将不得不出现并隐藏第一个表。
但是我遇到的错误是,例如当我按下第二个按钮时,它不会隐藏第一个表
<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>
最佳答案
使用它,它正在工作...
<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>
关于javascript - Javascript:切换类的添加或删除,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34448470/