JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換案例
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單Tab欄切換的具體代碼，供大家參考，具體內(nèi)容如下
要求：當(dāng)鼠標(biāo)點(diǎn)擊上面相應(yīng)的選項(xiàng)卡（tab），下面頁(yè)面的內(nèi)容也隨之而改變。
結(jié)構(gòu)分析：
全部的內(nèi)容都放到一個(gè)大的盒子里面，盒子里面又可以分為上面和下面兩個(gè)盒子。
上面的盒子放了 5個(gè)li，裝著5個(gè)小的選項(xiàng)卡，默認(rèn)會(huì)有一個(gè)被選中；
下面的盒子也包含了 5個(gè) div 模塊，模塊內(nèi)容與上面的選項(xiàng)一一對(duì)應(yīng)，當(dāng)前默認(rèn)的只有第一個(gè) div會(huì)被顯示出來(lái)。
實(shí)現(xiàn)思路：
點(diǎn)擊切換選項(xiàng)卡部分
Tab 欄切換有2個(gè)大的 模塊
1、上面模塊的選項(xiàng)卡，點(diǎn)擊某一個(gè)，改變當(dāng)前樣式，底色變?yōu)榧t色，字體顏色變?yōu)榘咨?。而其他的選項(xiàng)卡樣式不發(fā)生改變（排他思想）
通過(guò)修改類名的方式實(shí)現(xiàn)。
2、下面模塊的內(nèi)容，會(huì)隨著上面的選項(xiàng)卡變化。所以下面模塊變化寫到點(diǎn)擊事件里面。
規(guī)律：下面的模塊顯示的內(nèi)容和上面選項(xiàng)卡一一對(duì)應(yīng)，相匹配。
核心思路：給上面模塊里面所有的 li 添加自定義屬性，屬性值從 0 開(kāi)始作為索引號(hào)。
排他思想：通過(guò) for循環(huán)遍歷數(shù)組中的元素，進(jìn)入循環(huán)之后首先消除所有部分的樣式，接著再為所點(diǎn)擊的當(dāng)前部分添加樣式。
通過(guò) setAttribute（name，value）創(chuàng)建自定義屬性，name指的是為元素設(shè)置的自定義屬性，value為自定義屬性添加的屬性值。
通過(guò) getAttribute（name）獲取元素的屬性。name是屬性的名稱。
默認(rèn)第一個(gè)選項(xiàng)卡對(duì)應(yīng)的下面模塊是顯示的，需要在添加行內(nèi)樣式（style='display:block'）因?yàn)镃SS行內(nèi)樣式的優(yōu)先級(jí)高于外部樣式，會(huì)優(yōu)先顯示。
而（items[index].style.display = 'block';）這一句也相當(dāng)于創(chuàng)建了行內(nèi)樣式。
實(shí)現(xiàn)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Tab欄切換</title>
? ? <style>
? ? *{
? ? ? ? margin:0;
? ? ? ? padding:0;
? ? }
? ? .tab{
? ? ? ? width:800px;
? ? ? ? height:45px;
? ? ? ? border:1px solid #ccc;
? ? ? ? border-bottom:1px solid #c81623;
? ? ? ? background: #fafafa;
? ? ? ? position:relative;
? ? ? ? margin:100px auto;
? ? }
? ? .tab_list li{
? ? ? ? width:160px;
? ? ? ? height:45px;
? ? ? ? list-style:none;
? ? ? ? line-height:45px;
? ? ? ? text-align: center;
? ? ? ? float:left;
? ? }
? ? .tab_list .current{
? ? ? ? background-color:#c81623;
? ? ? ? color:#fff;
? ? }
? ? .item{
? ? ? ? width:800px;
? ? ? ? height: 200px;
? ? ? ? padding-top:40px;?
? ? ? ? /*line-height:200px;*/
? ? ? ? font-size: 30px;
? ? ? ? color:#fff;
? ? ? ? text-align: center;
? ? ? ? text-shadow:2px 2px 4px #000000;
? ? ? ? background: #efefef;
? ? ? ? /*opacity: 0.8;*/
? ? ? ? top:47px;
? ? ? ? position:absolute;
? ? }
? ? </style>
</head>
<body>
<div class='tab'>
? ? ? ? <div class='tab_list'>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li class='current'>個(gè)性推薦</li>
? ? ? ? ? ? ? ? <li>歌單</li>
? ? ? ? ? ? ? ? <li>主播電臺(tái)</li>
? ? ? ? ? ? ? ? <li>排行榜</li>
? ? ? ? ? ? ? ? <li>歌手</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? <div class='tab_con'>
? ? ? ? <div class="item one" style='display:block'>每日歌曲推薦</div>
? ? ? ? <div class="item two">精品歌單傾心推薦，給最懂音樂(lè)的你</div>
? ? ? ? <div class="item thr">上癮煙嗓情感之聲</div>
? ? ? ? <div class="item fou">新歌飆升榜</div>
? ? ? ? <div class="item fiv">歌手排行榜</div>
? ? </div>
</div>
<!-- ?tab 欄切換有2個(gè)模塊
?模塊的選項(xiàng)卡，點(diǎn)擊其中的某一個(gè)，被點(diǎn)擊的這一個(gè)底色將變成紅色的，其余的不變（排他思想）使用修改類的名稱的方式。 -->
<!-- ?下面顯示模塊內(nèi)容，會(huì)隨著上面的選項(xiàng)卡變化，所以下面模塊變化寫到點(diǎn)擊事件里面。
?規(guī)律：下面模塊顯示內(nèi)容和上面的選項(xiàng)卡一一對(duì)應(yīng)，相匹配。
? -->
?<script>
? ? ?var tab_list = document.querySelector('.tab_list');
? ? ?var lis = tab_list.querySelectorAll('li');
? ? ?var items = document.querySelectorAll('.item');
? ? ?//for 循環(huán)綁定點(diǎn)擊事件
? ? ?for(var i=0;i < lis.length;i++){
? ? ? ? ?lis[i].setAttribute('index',i);
? ? ? ? lis[i].onclick = function() {
? ? ? ? ? ? //
? ? ? ? ? ? ?for(var i=0;i < lis.length;i++){
? ? ? ? ? ? ? ? ?lis[i].className = '';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?//留下現(xiàn)在需要用的
? ? ? ? ? ? ?this.className = 'current';
? ? ? ? ? ? ?//下面顯示內(nèi)容模塊
? ? ? ? ? ? ?var index = this.getAttribute('index');
? ? ? ? ? ? ?console.log(index);
? ? ? ? ? ? ?//去掉其他的 item，讓這些隱藏起來(lái)
? ? ? ? ? ? ?//只留下當(dāng)前的 item，讓它顯示出來(lái)
? ? ? ? ? ? ?for(var i=0;i<items.length;i++){
? ? ? ? ? ? ? ? ?items[i].style.display='none';
? ? ? ? ? ? ?}
? ? ? ? ? ? ?items[index].style.display = 'block';
? ? ? ? ?}
? ? ?}
?</script>
</body>
</html>實(shí)現(xiàn)效果：
點(diǎn)擊其它選項(xiàng)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)在線網(wǎng)頁(yè)煙花效果
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)單的在線網(wǎng)頁(yè)煙花效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-02-02
微信小程序表單驗(yàn)證form提交錯(cuò)誤提示效果
這篇文章主要為大家詳細(xì)介紹了微信小程序表單驗(yàn)證form提交錯(cuò)誤提示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
javascript DIV實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript DIV跟隨鼠標(biāo)移動(dòng)，有一個(gè)div跟隨鼠標(biāo)移動(dòng)的結(jié)果，有一連串跟隨鼠標(biāo)移動(dòng)的效果，感興趣的小伙伴們可以參考一下2016-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)擊頁(yè)面出現(xiàn)文字
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊頁(yè)面出現(xiàn)文字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript中JSON.parse()與eval()解析json的區(qū)別
這篇文章主要介紹了javascript中JSON.parse()與eval()解析json的區(qū)別,詳細(xì)描述了json格式數(shù)據(jù)的操作技巧,并結(jié)合實(shí)例形式對(duì)比分析了使用JSON.parse()與eval()解析json的區(qū)別,需要的朋友可以參考下2016-05-05
js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)
這篇文章主要給大家介紹了關(guān)于js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64)的相關(guān)資料,主要記錄一下比較常見(jiàn)的圖片格式（File、Blob、base64）在不同的場(chǎng)景他們之間的相互轉(zhuǎn)換的方法,需要的朋友可以參考下2023-04-04
javascript中使用正則計(jì)算中文長(zhǎng)度的例子
這篇文章主要介紹了javascript中使用正則計(jì)算中文長(zhǎng)度的例子,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript前端加解密工具庫(kù)（CryptoJS、JSEncrypt、bcryptjs）的具體使用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-12-12
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)放大鏡效果，利用背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
在將uniapp打包成APP端時(shí),上架到應(yīng)用市場(chǎng)的時(shí)候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中設(shè)置隱私政策彈窗的相關(guān)資料,需要的朋友可以參考下2023-01-01