在網(wǎng)頁的開發(fā)中,選項(xiàng)卡是一個很常見的元素,jQuery里也提供了很方便的選項(xiàng)卡插件,可以輕松實(shí)現(xiàn)選項(xiàng)卡效果。
$(function(){ //選項(xiàng)卡切換 $('.tab-title ul li').click(function(){ var index=$(this).index(); $(this).addClass('active').siblings().removeClass('active'); $('.tab-content>li').eq(index).show().siblings().hide(); }) })
在這段代碼中,我們使用了jQuery的click函數(shù)來響應(yīng)選項(xiàng)卡標(biāo)題欄里的點(diǎn)擊事件。通過index方法獲取點(diǎn)擊的是第幾個選項(xiàng)卡,然后添加和移除active類來改變選項(xiàng)卡標(biāo)題的樣式,并使用eq方法來選中相應(yīng)的選項(xiàng)卡內(nèi)容。
通過使用jQuery的選項(xiàng)卡插件,我們可以更快捷和靈活地實(shí)現(xiàn)選項(xiàng)卡效果,同時也可以自定義樣式和功能,提高頁面的交互性和用戶體驗(yàn)。