js與jquery分別實現(xiàn)tab標(biāo)簽頁功能的方法
本文實例講述了js與jquery分別實現(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 實現(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實現(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ù)還可以簡化:
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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
- JS控制表格隔行變色
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- javascript實現(xiàn)table表格隔行變色的方法
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- javascript表格隔行變色加鼠標(biāo)移入移出及點擊效果的方法
- JavaScript實現(xiàn)的斑馬線表格效果【隔行變色】
- 純css+js寫的一個簡單的tab標(biāo)簽頁帶樣式
- 最簡單純JavaScript實現(xiàn)Tab標(biāo)簽頁切換的方式(推薦)
- js封裝tab標(biāo)簽頁實例分享
- JavaScript實現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
- JavaScript表格隔行變色和Tab標(biāo)簽頁特效示例【附j(luò)Query版】
相關(guān)文章
盤點javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯?,F(xiàn)在分享給大家,希望能給大家一個參考2016-03-03詳解JS中的compose函數(shù)和pipe函數(shù)用法
這篇文章主要介紹了JS中的compose函數(shù)和pipe函數(shù)用法,想深入了解Javascript的同學(xué),可以參考下2021-04-04深入理解JavaScript系列(1) 編寫高質(zhì)量JavaScript代碼的基本要點
才華橫溢的Stoyan Stefanov,在他寫的由O’Reilly初版的新書《JavaScript Patterns》(JavaScript模式)中,我想要是為我們的讀者貢獻(xiàn)其摘要,那會是件很美妙的事情2012-01-01