js實現(xiàn)tab欄切換制作
更新時間：2022年07月04日 07:49:24 作者：阿旋要畢業(yè)~
這篇文章主要為大家詳細介紹了js實現(xiàn)tab欄切換制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)tab欄切換制作的具體代碼，供大家參考，具體內(nèi)容如下
效果：
思想：
1.點擊每個tab時。要先用排他思想，使得所有l(wèi)i不加上背景，再讓點擊的tab加上某個類。
2.上面的tab與下面顯示內(nèi)容的頁面是一一對應的。因此，可以使用自定義屬性，使tab加上一個index索引，這樣就能知道每次點擊的是哪一個tab了。
3.最后仍然使用排他思想，當點擊tab時，先讓所有的內(nèi)容都不顯示，再讓對應的內(nèi)容進行顯示。
代碼：
<!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');
? ? ? ? ? ? // 鼠標經(jīng)過時，li加入className，同時讓其他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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript 實現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。2008-01-01
GreyBox技術(shù)總結(jié)（轉(zhuǎn)）
GreyBox是一個遮罩層的組件也稱模式窗口或模態(tài)窗口（所謂模態(tài)窗口，就是指除非采取有效的關(guān)閉手段，用戶的鼠標焦點或者輸入光標將一直停留在其上的窗口），它運行以后可以產(chǎn)生不錯的界面。2010-11-11
新的一年就要到了，你一定有很多想許下的愿望吧!今天小編就為大家?guī)砹艘粋€基于Html+CSS+JavaScript實現(xiàn)的帶雪花的許愿墻特效，需要的可以了解一下2022-01-01
JavaScript在處理動畫方面極富靈活性,提供了一系列事件,使得開發(fā)者能夠更精準地控制動畫執(zhí)行的各個階段,使用這些事件,可以在動畫開始、結(jié)束、重復等動作發(fā)生時執(zhí)行特定的行為,本文將詳細介紹JavaScript中常用的動畫事件,并展示其使用方法2023-12-12
下面小編就為大家?guī)硪黄斦刯s原型繼承的一些問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了BootStrap導航欄問題記錄,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07
js文件中調(diào)用js的實現(xiàn)方法小結(jié)
JavaScript文件引用JavaScript文件的方法，需要的朋友可以參考下。2009-10-10
這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
chinaz利用了ajax實現(xiàn)評論的讀取操作，下面我們參考chinaz的代碼2008-05-05