jQuery切换表单

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