[英]Javascript: toggle class add or remove
我要做的是:當我單擊“郵件”按鈕時,第一個表將出現並隱藏第二個表,而當按“訂戶”按鈕時,第二個表將不得不出現並隱藏第一個表。 但是我遇到的錯誤是,例如當我按下第二個按鈕時,它不會隱藏第一個表
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.