js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
更新時(shí)間：2016年11月18日 11:38:55 作者：栁羅風(fēng)塵
這篇文章主要介紹了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法,結(jié)合實(shí)例形式對比分析了javascript與jQuery分別實(shí)現(xiàn)tab標(biāo)簽功能的操作技巧,需要的朋友可以參考下
本文實(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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS控制表格隔行變色
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- javascript實(shí)現(xiàn)table表格隔行變色的方法
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- javascript表格隔行變色加鼠標(biāo)移入移出及點(diǎn)擊效果的方法
- JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
- 純css+js寫的一個簡單的tab標(biāo)簽頁帶樣式
- 最簡單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁切換的方式(推薦)
- js封裝tab標(biāo)簽頁實(shí)例分享
- JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
- JavaScript表格隔行變色和Tab標(biāo)簽頁特效示例【附j(luò)Query版】
相關(guān)文章
javascript 數(shù)組排序與對象排序的實(shí)例
這篇文章主要介紹了javascript 數(shù)組排序與對象排序的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-07-07
詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)
這篇文章主要介紹了詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易封裝彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
盤點(diǎn)javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點(diǎn)javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯?，F(xiàn)在分享給大家，希望能給大家一個參考2016-03-03
這篇文章主要介紹了JavaScript框架是什么?怎樣才能叫做框架？,本文講解了什么是 JavaScript 框架、JavaScript 框架的典型特性等內(nèi)容,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了layui表格數(shù)據(jù)重載，根據(jù)條件查詢，監(jiān)聽按鈕事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
函數(shù)式編程是一種編程范式,將整個程序都由函數(shù)調(diào)用以及函數(shù)組合構(gòu)成。 可以看成一條流水線,數(shù)據(jù)可以不斷地從一個函數(shù)的輸出流入另一個函數(shù)的輸入,最后輸出結(jié)果2022-10-10
詳解JS中的compose函數(shù)和pipe函數(shù)用法
這篇文章主要介紹了JS中的compose函數(shù)和pipe函數(shù)用法，想深入了解Javascript的同學(xué)，可以參考下2021-04-04
深入理解JavaScript系列(1) 編寫高質(zhì)量JavaScript代碼的基本要點(diǎn)
才華橫溢的Stoyan Stefanov，在他寫的由O’Reilly初版的新書《JavaScript Patterns》(JavaScript模式)中，我想要是為我們的讀者貢獻(xiàn)其摘要，那會是件很美妙的事情2012-01-01
本文主要介紹了js對cookie的操作：js設(shè)置cookie；js獲取cookie；給cookie設(shè)置終止日期；刪除cookie 等，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01