jQuery選項(xiàng)卡切換模板是一種常用的網(wǎng)頁(yè)UI展示方式，可以輕松實(shí)現(xiàn)在同一頁(yè)面上切換不同選項(xiàng)內(nèi)容的效果。下面我們來(lái)介紹一種jQuery選項(xiàng)卡切換模板的實(shí)現(xiàn)方法。

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">選項(xiàng)1</a></li>
<li><a href="#tab2">選項(xiàng)2</a></li>
<li><a href="#tab3">選項(xiàng)3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>選項(xiàng)1的內(nèi)容</p>
</div>
<div id="tab2" class="tab">
<p>選項(xiàng)2的內(nèi)容</p>
</div>
<div id="tab3" class="tab">
<p>選項(xiàng)3的內(nèi)容</p>
</div>
</div>
</div>
<script>
$(function() {
$('.tab-content .tab').hide();
$('.tab-content .active').show();
$('.tab-links a').on('click', function(e)  {
var currentTab = $(this).attr('href');
$('.tab-content .tab').hide();
$(currentTab).show();
$('.tab-links li').removeClass('active');
$(this).parent().addClass('active');
e.preventDefault();
});
});
</script>

上述代碼實(shí)現(xiàn)了一個(gè)選項(xiàng)卡的切換效果。其中，通過(guò)控制類名來(lái)控制選項(xiàng)卡內(nèi)容的展示，通過(guò)監(jiān)聽(tīng)點(diǎn)擊事件來(lái)切換不同選項(xiàng)卡。