快捷導(dǎo)航

js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法

更新時(shí)間：2016年11月18日 11:38:55 作者：栁羅風(fēng)塵

這篇文章主要介紹了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript與jQuery分別實(shí)現(xiàn)tab標(biāo)簽功能的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁(yè)功能的方法。分享給大家供大家參考，具體如下：

首先列出樣式和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ù)還可以簡(jiǎn)化：

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é)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Bootstrap每天必學(xué)之導(dǎo)航條(二)
Bootstrap每天必學(xué)之導(dǎo)航條，進(jìn)一步向大家講解了導(dǎo)航條養(yǎng)殖，以及導(dǎo)航條中元素的使用方法，感興趣的小伙伴們可以參考一下
2016-03-03
Javascript絕句欣賞一些經(jīng)典的js代碼
Javascript絕句欣賞一些經(jīng)典的js代碼整理，學(xué)習(xí)js的朋友可以參考下
2012-02-02
仿豬八戒網(wǎng)左下角的文字滾動(dòng)效果
覺(jué)得豬八戒網(wǎng)左下角的文字滾動(dòng)，效果不錯(cuò)！自己摸索了一下，以自己的方法實(shí)現(xiàn)了！沒(méi)有運(yùn)用jQuery,不過(guò)用了自己的編寫的Js庫(kù)！
2011-10-10
淺析JavaScript中var that=this
this是Javascript語(yǔ)言的一個(gè)關(guān)鍵字。它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。接下來(lái)通過(guò)本文給大家分享JavaScript中var that=this所代表的意思，需要的朋友參考下吧
2017-02-02
JS寄快遞地址智能解析的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS寄快遞地址智能解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
js for循環(huán)倒序輸出數(shù)組元素的實(shí)例
下面小編就為大家?guī)?lái)一篇js for循環(huán)倒序輸出數(shù)組元素的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
bootstrap組件之按鈕式下拉菜單小結(jié)
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2017-01-01
JavaScript連接組件實(shí)現(xiàn)打印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何連接連接抖音打印組件實(shí)現(xiàn)打印小票功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下
2024-04-04
JavaScript實(shí)現(xiàn)瀑布流布局的代碼分享
不知道大家在線上購(gòu)物的時(shí)候有沒(méi)有發(fā)現(xiàn)到，自己逛起來(lái)根本就停不下來(lái)，越往下翻越是覺(jué)得就會(huì)出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來(lái)用JS實(shí)現(xiàn)這一布局，需要的可以參考一下
2023-04-04
基于JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-02-02