jQuery選項(xiàng)卡式登錄頁面，是一種優(yōu)雅高效的登錄頁面風(fēng)格，它可以讓用戶輕松切換不同的登錄方式，同時(shí)提供豐富的功能和界面設(shè)計(jì)，讓用戶得以快速完成登錄操作。

// HTML結(jié)構(gòu)
<div id="login-tab" class="tab">
<ul class="tab-title">
<li class="active">普通登錄</li>
<li>驗(yàn)證碼登錄</li>
</ul>
<div class="tab-content">
<div class="tab-panel active">
<form>
<label>用戶名:</label>
<input type="text" name="username">
<label>密碼:</label>
<input type="password" name="password">
<input type="submit" value="登錄">
</form>
</div>
<div class="tab-panel">
<form>
<label>手機(jī)號(hào):</label>
<input type="text" name="phone">
<label>驗(yàn)證碼:</label>
<input type="text" name="code">
<input type="submit" value="登錄">
</form>
</div>
</div>
</div>
// CSS樣式
.tab-title li {
display: inline-block;
padding: 10px;
background-color: #f2f2f2;
cursor: pointer;
}
.tab-title li.active {
background-color: #fff;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
}
// jQuery代碼
$('.tab-title li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var index = $(this).index();
$('.tab-panel').removeClass('active');
$('.tab-panel').eq(index).addClass('active');
});

通過這段代碼，我們可以創(chuàng)建一個(gè)簡(jiǎn)單的選項(xiàng)卡式登錄頁面，用戶點(diǎn)擊不同的登錄選項(xiàng)卡，頁面會(huì)自動(dòng)切換到相應(yīng)的登錄方式，簡(jiǎn)單易用，界面友好。