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