js和jquery實(shí)現(xiàn)tab狀態(tài)欄切換效果
今天做一個簡單的小案例，用js和jquery分別去實(shí)現(xiàn)點(diǎn)擊tab欄，實(shí)現(xiàn)切換的目的，效果如下圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>狀態(tài)欄切換</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .main { width: 720px; display: block; margin: 50px auto; } .table-title { width: 100%; height: 100%; border: 1px solid black; } .table-title ul { list-style: none; display: flex; } .table-title li { width: 25%; height: 100%; background-color: gainsboro; text-align: center; border-right: 1px solid black; cursor: pointer; } .table-title li:last-child { border-right: none; } .table-title li label { text-align: center; cursor: pointer; } .tab-box .tab-show { display: none; border: 1px solid black; border-top: none; text-align: center; } /* 讓第一個框顯示出來 */ .tab-box .tab-show:first-Child { display: block; } .change { opacity: 0.7; } </style> <script src='http://m.4tl426be.cn/bcjs/js/jquery-3.5.1.js'></script> <script> // js實(shí)現(xiàn) window.onload = function() { //獲取元素 var allLi = document.getElementsByTagName('li'); var boxs = document.getElementsByClassName('tab-box')[0].children; //遍歷進(jìn)行切換效果的實(shí)現(xiàn) for (var i = 0; i < allLi.length; i++) { //給每個li定義一個屬性索引值 allLi[i].index = i; //添加點(diǎn)擊事件 allLi[i].onclick = function() { //獲取索引值 var index = this.index; //展示內(nèi)容 boxs[index].style.display='block'; allLi[index].style.opacity=0.7; for (var j = 0; j < allLi.length; j++) { //將兄弟元素的樣式改回 if(j != index){boxs[j].style.display='none';allLi[j].style.opacity=1; } } } } } // jquery實(shí)現(xiàn) $().ready(function() { $('.table-title li').click(function() { //通過 .index()方法獲取元素下標(biāo)，從0開始，賦值給某個變量 var _index = $(this).index(); //讓內(nèi)容框的第 _index 個顯示出來，其他的被隱藏 $('.tab-box>div').eq(_index).show().siblings().hide(); //改變選中時候的選項(xiàng)框的樣式，移除其他幾個選項(xiàng)的樣式 $(this).addClass('change').siblings().removeClass('change'); }); }); </script> </head> <body> <div class='main'> <div class='table-title'> <ul> <li><label>手機(jī)數(shù)碼</label></li> <li><label>電腦辦公</label></li> <li><label>生活用品</label></li> <li><label>居家必備</label></li> </ul> </div> <div style='width: 100%;height: calc(100%-40px);'> <div class='tab-show'> 手機(jī)數(shù)碼 </div> <div class='tab-show'> 電腦辦公 </div> <div class='tab-show'> 生活用品 </div> <div class='tab-show'> 居家必備 </div> </div> </div> </body></html>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 一款功能強(qiáng)大的markdown編輯器tui.editor使用示例詳解2. .Net加密神器Eazfuscator.NET?2023.2?最新版使用教程3. 利用CSS制作3D動畫4. SpringBoot+TestNG單元測試的實(shí)現(xiàn)5. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）6. Python+unittest+requests 接口自動化測試框架搭建教程7. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法8. PHP利用COM對象訪問SQLServer、Access9. 存儲于xml中需要的HTML轉(zhuǎn)義代碼10. Springboot 全局日期格式化處理的實(shí)現(xiàn)
網(wǎng)公網(wǎng)安備