js實(shí)現(xiàn)tab欄切換制作
更新時(shí)間：2022年07月04日 07:49:24 作者：阿旋要畢業(yè)~
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)tab欄切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)tab欄切換制作的具體代碼，供大家參考，具體內(nèi)容如下
效果：
思想：
1.點(diǎn)擊每個(gè)tab時(shí)。要先用排他思想，使得所有l(wèi)i不加上背景，再讓點(diǎn)擊的tab加上某個(gè)類。
2.上面的tab與下面顯示內(nèi)容的頁(yè)面是一一對(duì)應(yīng)的。因此，可以使用自定義屬性，使tab加上一個(gè)index索引，這樣就能知道每次點(diǎn)擊的是哪一個(gè)tab了。
3.最后仍然使用排他思想，當(dāng)點(diǎn)擊tab時(shí)，先讓所有的內(nèi)容都不顯示，再讓對(duì)應(yīng)的內(nèi)容進(jìn)行顯示。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>tab切換欄的制作</title>
? ? <style>
?
? ? ? ? *{
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? .head{
? ? ? ? ? ? width: 1000px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? margin: 10px auto;
? ? ? ? ? ??
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? line-height: 30px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .bg {
? ? ? ? ? ? color: white;
? ? ? ? ? ? background-color: red;
? ? ? ? }
? ? ? ? .item {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class="head">
? ? ? ? <ul>
? ? ? ? ? ? <li>商品詳情</li>
? ? ? ? ? ? <li>商品詳情</li>
? ? ? ? ? ? <li>商品詳情</li>
? ? ? ? ? ? <li>商品詳情</li>
? ? ? ? ? ? <li>商品詳情5</li>
? ? ? ? </ul>
? ? ? ? <div class="detail">
? ? ? ? ? ? <div class="item">item1</div>
? ? ? ? ? ? <div class="item">item2</div>
? ? ? ? ? ? <div class="item">item3</div>
? ? ? ? ? ? <div class="item">item4</div>
? ? ? ? ? ? <div class="item">item5</div>
? ? ? ? </div>
? ? ? ? <script>
? ? ? ? ? ? var lis = document.querySelectorAll('li');
? ? ? ? ? ? // 鼠標(biāo)經(jīng)過(guò)時(shí)，li加入className，同時(shí)讓其他li去掉該類。
? ? ? ? ? ? // 綁定事件
? ? ? ? ? ? var detail = document.querySelector('.detail');
? ? ? ? ? ? var items = detail.querySelectorAll('.item');
? ? ? ? ? ? for(var i=0;i<lis.length;i++){
? ? ? ? ? ? ? ? lis[i].setAttribute('index',i);
? ? ? ? ? ? ? ? var index;
? ? ? ? ? ? ? ? lis[i].onclick = function(){
? ? ? ? ? ? ? ? ? ? for(var j=0;j<lis.length;j++){
? ? ? ? ? ? ? ? ? ? ? ? lis[j].className='';
? ? ? ? ? ? ? ? ? ? ? ? items[j].style.display = 'none';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.className='bg';
? ? ? ? ? ? ? ? ? ? index = this.getAttribute('index');
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? items[index].style.display='block';
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? }
? ? ? ? </script>
? ? </div>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 實(shí)現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。2008-01-01
GreyBox技術(shù)總結(jié)（轉(zhuǎn)）
GreyBox是一個(gè)遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關(guān)閉手段，用戶的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的窗口），它運(yùn)行以后可以產(chǎn)生不錯(cuò)的界面。2010-11-11
基于JavaScript實(shí)現(xiàn)雪花許愿墻特效
新的一年就要到了，你一定有很多想許下的愿望吧!今天小編就為大家?guī)?lái)了一個(gè)基于Html+CSS+JavaScript實(shí)現(xiàn)的帶雪花的許愿墻特效，需要的可以了解一下2022-01-01
JavaScript在處理動(dòng)畫方面極富靈活性,提供了一系列事件,使得開發(fā)者能夠更精準(zhǔn)地控制動(dòng)畫執(zhí)行的各個(gè)階段,使用這些事件,可以在動(dòng)畫開始、結(jié)束、重復(fù)等動(dòng)作發(fā)生時(shí)執(zhí)行特定的行為,本文將詳細(xì)介紹JavaScript中常用的動(dòng)畫事件,并展示其使用方法2023-12-12
下面小編就為大家?guī)?lái)一篇詳談js原型繼承的一些問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了BootStrap導(dǎo)航欄問(wèn)題記錄,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-07-07
js文件中調(diào)用js的實(shí)現(xiàn)方法小結(jié)
JavaScript文件引用JavaScript文件的方法，需要的朋友可以參考下。2009-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
來(lái)自chinaz的ajax獲取評(píng)論代碼
chinaz利用了ajax實(shí)現(xiàn)評(píng)論的讀取操作，下面我們參考chinaz的代碼2008-05-05