jQuery Switch the form
html
<php>$JSARR[]=$TEMPLATE_PATH."js/jquery-1.9.1.min.js"</php>
<php>$JSARR[]=$TEMPLATE_PATH."js/login.js"</php>
<div class="tabs">
<ul id="tabs">
<li class="tab-nav-action" rel="user">会员</li>
<li class="tab-nav" rel="other">其他</li>
</ul>
</div>
css
<style>
.tabs {
float: left;
width: 100%;
margin-bottom: 10px;
}
.tabs ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.tabs ul li {
float: left;
line-height: 24px;
margin: 0;
text-align: center;
}
.tab-nav {
width: 50%;
cursor: pointer;
}
.tab-nav-action {
color: #fff;
width: 50%;
background: #1a9deb;
cursor: pointer;
}
</style>
javascript
//login.js
$(document).ready(function() {
init_login_panel();
});
//初始化登录表单
function init_login_panel() {
$("#tabs li").on("click", function() {
$(this).parent().children("li").attr("class","tab-nav");//将所有选项置为未选中
$(this).attr("class","tab-nav-action");//设置当前选中项为选中样式
var rel = $(this).attr("rel");
if (rel == 'other') {
document.getElementById('formLogin_other').style.display = 'block';
document.getElementById('formLogin_user').style.display = 'none';
} else {
document.getElementById('formLogin_user').style.display = 'block';
document.getElementById('formLogin_other').style.display = 'none';
}
});
}
如果是多个表单切换,上边js写法就有点力不从心了。
html
<div class="tabs">
<ul id="tabs">
<li class="tab-nav-action" rel="member">会员</li>
<li class="tab-nav" rel="distributor">分销商</li>
<li class="tab-nav" rel="broker">经纪人</li>
<li class="tab-nav" rel="property_consultant">置业顾问</li>
</ul>
</div>
<div id="panel">
<!--普通会员 member-->
<form id="formLogin_member" name="formLogin_member" action="{:u('Mobile/Login/member_login')}" method="post" class="panel" rel="member" style="display:block;">
</form>
<!--分销商-->
<form id="formLogin_distributor" name="formLogin_distributor" action="{:u('Mobile/Login/distributor_login')}" method="post" class="panel" rel="distributor" style="display:block;">
</form>
<!--经纪人-->
<form id="formLogin_broker" name="formLogin_broker" action="{:u('Mobile/Login/broker_login')}" method="post" class="panel" rel="broker" style="display:block;">
</form>
<!--置业顾问-->
<form id="formLogin_property_consultant" name="formLogin_property_consultant" action="{:u('Mobile/Login/property_consultant_login')}" method="post" class="panel" rel="property_consultant" style="display:block;">
</form>
</div>
css
.tab-nav {
width: 25%;
cursor: pointer;
}
.tab-nav-action {
color: #fff;
width: 25%;
background: #1a9deb;
cursor: pointer;
}
##javascript
//初始化登录表单
function init_login_panel() {
$("#tabs li").on("click", function() {
$(this).parent().children("li").attr("class","tab-nav");//将所有选项置为未选中
$(this).attr("class","tab-nav-action");//设置当前选中项为选中样式
var rel = $(this).attr("rel");
//alert(rel);
$("#panel").find(".panel").hide();
$("#panel").find(".panel[rel='"+rel+"']").show();
});
}
表单方法用小写写是因为thinkphp视图层区分大小写,驼峰法方法并不能找到驼峰法模板。
Tips : jQuery 1.9 .live() is not a function
jQuery .live()和.on的区别
自行搜索或者参考http://www.cnblogs.com/xiaoliu66007/p/5029909.html