[英]Show hide div jQuery or JavaScript
我要交换3个div,因为从对应于div的菜单中单击了一个按钮。 它们内部都有不同的内容。 这是html:
<div id="#">
<table width="700" style="color:#000">
<tr>
<td align="left" style="border: none"><label for="name">Name</label></td>
<td align="right" style="border: none"><input type="text" name="country" value="Value" readonly /></td>
</tr>
<tr height="10"></tr>
<tr>
<td align="left" style="border: none"><label for="name">Description</label></td>
<td align="right" style="border: none"><input type="text" name="country" value="#" readonly /></td>
</tr>
<tr height="20"></tr>
<tr>
<th align="left">Country</th><th></th>
</tr>
<tr>
<th align="left" id="th2">Value</th><th align="left" id="th2">Description</th>
</tr>
<tr>
<td>CH</td>
<td>Switzerland</td>
</tr>
<tr style="background-color:#f1f1f1;">
<td>ZA</td>
<td>South Africa</td>
</tr>
<tr height="20"></tr>
<tr><td style="border: none"></td><td align="right" style="border: none"><input type="submit" value="Submit"></input></td></tr>
</table>
</div><!-- country -->
<div id="#" style="display: none">
<table width="700" style="color:#000">
<tr>
<td align="left" style="border: none;"><label for="name">Value</label></td>
<td align="right" style="border: none;"><input type="text" name="hibernate" value="# " readonly /></td>
</tr>
<tr height="10"></tr>
<tr>
<td align="left" style="border: none;"><label for="name">Description</label></td>
<td align="right" style="border: none;"><input type="text" name="hibernate" value="#" readonly /></td>
</tr>
<tr height="25"></tr>
<tr>
<table width="700" id="paramContent">
<thead>
<tr>
<th>Value</th><th>Description</th><th>Property</th>
</tr>
</thead>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr height="20"></tr>
<tr><td style="border: none;"></td><td style="border: none"></td><td align="right" style="border: none"><input type="submit" value="Add"></input></td></tr>
</table>
</table>
</div><!-- div -->
<div id="#" style="display: none">
<table width="700" style="color:#000">
<div class="fields">
<tr>
<td align="left" style="border: none;"><label for="name">Name</label></td>
<td align="right" style="border: none;"><input type="text" name="country" value="#" readonly /></td>
</tr>
<tr height="10"></tr>
<tr>
<td align="left" style="border: none;"><label for="name">Description</label></td>
<td align="right" style="border: none;"><input type="text" name="country" value="Language" readonly /></td>
</tr>
</div>
<tr height="20"></tr>
<tr>
<th align="left">Country</th><th></th>
</tr>
<tr>
<th align="left" id="th2">Value</th><th align="left" id="th2">Description</th>
</tr>
<tr>
<td>AF</td>
<td>Afrikaans</td>
</tr>
<tr>
<td>DE</td>
<td>German</td>
</tr>
<tr>
<td>EN</td>
<td>English</td>
</tr>
<tr>
<td>ZU</td>
<td>ZUlu</td>
</tr>
<tr height="20"></tr>
<tr><td style="border: none;"></td><td align="right" style="border: none;"><input type="submit" value="Submit"></input></td></tr>
</table>
</div><!-- language -->
JavaScript
function toggleDiv(option) {
if (option == 'Country') {
document.getElementById('country').style.display = 'block';
document.getElementById('hibernate').style.display = 'none';
document.getElementById('language').style.display = 'none';
}
if (option == 'Hibernate') {
document.getElementById('country').style.display = 'none';
document.getElementById('hibernate').style.display = 'block';
document.getElementById('language').style.display = 'none';
}
if (option == 'Language') {
document.getElementById('country').style.display = 'none';
document.getElementById('hibernate').style.display = 'none';
document.getElementById('language').style.display = 'block';
}
}
和用于交换div的按钮
<nav id="navTop">
<ul id="tabs">
<a href="" id="country" onclick="return false, toggleDiv('Country');"><li>Country</li></a>
<a href="" id="hibernate" onclick="return false, toggleDiv('Hibernate');"><li>Hibernate</li></a>
<a href="" id="language" onclick="return false, toggleDiv('Language');"><li>Language</li></a>
</ul>
</nav>
删除逗号(false,):
<a href="" id="country" onclick="return toggleDiv('Country');"><li>Country</li></a>
<a href="" id="hibernate" onclick="return toggleDiv('Hibernate');"><li>Hibernate</li></a>
<a href="" id="language" onclick="return toggleDiv('Language');"><li>Language</li></a>
看来您想阻止默认事件。 但是,返回false不是正确的方法。
<a onclick='event.preventDefault();toggleDiv('id');'>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.