這個(gè)功能在現(xiàn)在的網(wǎng)站中使用較為普遍，就是以選項(xiàng)卡的形式來(lái)對(duì)一些內(nèi)容做了分類。，比如下面的天貓商城。
下面的源碼是仿照天貓寫的一個(gè)選項(xiàng)卡，實(shí)現(xiàn)起來(lái)的效果如下。
主要是利用我們?cè)邳c(diǎn)擊相應(yīng)板塊是觸發(fā)它的單擊事件，在單擊事件中再對(duì)內(nèi)容顯示框(tabbox)進(jìn)行相應(yīng)項(xiàng)的顯示和隱藏操作。
同時(shí)利用hover為其添加了鼠標(biāo)滑過(guò)時(shí)的效果。
代碼：
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <link href="css/style1.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.3.2.min.js"></script> <title></title> <script> $(function () { var $div_li = $("div.tab_menu ul li"); $div_li.click(function () { //定義了tan_menu對(duì)應(yīng)的單擊事件，也就是類別的單擊事件。 $(this).addClass("selected") .siblings().removeClass("selected"); var index = $div_li.index(this); $("div.tab_box>div").eq(index).show() .siblings().hide(); }).hover(function () { //定義了鼠標(biāo)滑過(guò)特效 $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); }); </script></head><body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">時(shí)事</li> <li>體育</li> <li>娛樂(lè)</li> </ul> </div> <div class="tab_box"> <div>時(shí)事</div> <div class="hide">體育</div> <div class="hide">娛樂(lè)</div> </div> </div></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家熟練掌握實(shí)現(xiàn)選項(xiàng)卡切換的技巧有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
