jquery-控制div的显示与隐藏
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的
jquery中show、hide事件应用:
<script type="text/javascript">
$().ready(function(){
$("#enterpriseLogin").hide();
});
</script>
<script type="text/javascript">
function show_selfLogin() {
$("#selfLogin").show();
$("#enterpriseLogin").hide();
}
function show_enterpriseLogin() {
$("#selfLogin").hide();
$("#enterpriseLogin").show();
}
</script>
HTML部分:
<body>
<div align="center">
<div
style="display: block; width: 300px; height: 150px; border: 2px solid red;">
<ul>
<li id="li_selfLogin" style="float: left">
<P></P>
<a href="javascript:void(0)" οnclick="show_selfLogin()">个人账户登录</a>
</li>
<li id="li_enterpriseLogin" style="float: left">
<a href="javascript:void(0)" οnclick="show_enterpriseLogin()">企业账户登录</a>
</li>
</ul>
<div id="selfLogin" align="center">
<p></p>
<br />
<p></p>
<br />
个人账户:
<input type="text" />
<p></p>
密码:
<input type="text" />
<p></p>
<input type="button" value="提交" />
</div>
<br />
<div id="enterpriseLogin">
<p></p>
<br />
<p></p>
企业账户:
<input type="text" />
<p></p>
密码:
<input type="text" />
<p></p>
<input type="button" value="提交" />
</div>
</div>
</div>
</body>