本文實(shí)例講述了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法。分享給大家供大家參考，具體如下：
首先列出樣式和html標(biāo)簽
<style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 20px;} #container div{display: none; width: 303px; height: 300px; border: 1px solid #ddd; } #container .ssd{display: block;} .ssl{background: #abcdef;}</style></head><body> <div id="tab"> <ul id="myul"> <li class="ssl">1</li> <li>2</li> <li>3</li> </ul> <div id="container"> <div class="ssd">woshi1</div> <div>woshi2</div> <div>woshi3</div> </div> </div></body>然后就是原生的js 實(shí)現(xiàn)tab標(biāo)簽 的代碼
<script type="text/javascript">var ul = document.getElementById('myul');var li = ul.getElementsByTagName('li');var con = document.getElementById('container');var div = con.getElementsByTagName('div');var len = li.length;for (var i = 0; i < len; i++) {li[i].index = i;li[i].onclick=choose;li[i].onmouseover = choose;};function choose(){for(var j = 0; j < len; j++) { li[j].className = ''; div[j].style.display = 'none'; } this.className = 'ssl'; div[this.index].style.display='block';}</script>那我們改用jquery實(shí)現(xiàn) 代碼如下
$('#myul li').click(choose);$('#myul li').hover(choose);function choose(){ $(this).addClass('ssl').siblings().removeClass('ssl'); $('#container div').eq($(this).index()).show().siblings().hide();}其實(shí)函數(shù)還可以簡化：
function choose(){ $(this).addClass('ssl').siblings().removeClass('ssl').parent().next().children().eq($(this).index()).show().siblings().hide();}更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
