JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換內(nèi)容欄
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換內(nèi)容欄的具體代碼，供大家參考，具體內(nèi)容如下
html+css部分
<!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>Document</title> <style>/* 初始化css，因?yàn)橛心J(rèn)邊距*{ margin:0; padding:0;}h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}ol,ul{ list-style:none;}img,fieldset{ border:0 none; display:block;} */div,ul,li{ box-sizing: border-box; margin: 0; padding: 0;}ul{ list-style-type: none;}a{ text-decoration: none;}#nav{ width: 450px; height: 400px; margin: 100px auto;/*左右居中*/ background-color: pink; padding: 0; font-size: 14px;}li{ float: left; width: 150px; height: 30px; text-align: center; line-height: 0.6rem; border: 0.02rem solid #ccc;}.content{ clear: both; position: relative;}.content div{ width: 450px; height: 370px; position: absolute; display: none;}.tab .choose{ background-color: skyblue;}.content .current{ display: block;} </style> <script src='http://www.leifengta.com.cn/bcjs/jQuery.mini.js'></script> </head><body> <div id='nav'><div class='tab'> <ul><li ><a href='http://www.leifengta.com.cn/bcjs/14003.html#' > 1</a></li><li><a href='http://www.leifengta.com.cn/bcjs/14003.html#' >2</a></li><li><a href='http://www.leifengta.com.cn/bcjs/14003.html#' >3</a></li> </ul></div><div class='content'> <div class='current'>1</div> <div>2</div> <div>3</div></div> </div> </body></html>
原生js代碼
var lis = document.querySelectorAll(’li’);var divs = document.querySelector(’.content’).querySelectorAll(’div’); for(var i=0 ; i<lis.length ; i++){ lis[i].setAttribute(’dateIndex’,i);//設(shè)置每一個(gè)li的index，方便后面鎖定內(nèi)容欄 lis[i].addEventListener(’click’,function(){for(var j=0 ; j<lis.length ; j++){ lis[j].className = ’’;//將所有的li的樣式設(shè)置為空}this.className = ’choose’;//設(shè)置當(dāng)前點(diǎn)擊的li的樣式（排他）var index = this.getAttribute(’dateIndex’);//獲取當(dāng)前l(fā)i的index// console.log(index);for(var j=0 ; j<lis.length ; j++){ divs[j].className = ’’;//排他 // lis[i].className = ’choose’;}divs[index].className = ’current’; })}
## jQuery方法```javascript//jQuer方法$(function(){ $('li').click(function(){$(this).addClass('choose');//為當(dāng)前點(diǎn)擊的li添加樣式$(this).siblings('li').removeClass('choose');//它的兄弟元素消除樣式（排他）var index = $(this).index();//獲取當(dāng)前點(diǎn)擊的li的index$('.content div').eq(index).show().siblings('div').hide();//通過(guò)index獲取到相對(duì)應(yīng)的內(nèi)容框，通過(guò)show()顯示出來(lái)，在選取它的兄弟元素隱藏,分解======》//$('.content div').eq(index).show()；// $('.content div').eq(index).siblings('div').hide() })})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 詳解Android studio 動(dòng)態(tài)fragment的用法2. 編程語(yǔ)言PHP在Web開(kāi)發(fā)領(lǐng)域的優(yōu)勢(shì)在哪？3. 什么是python的自省4. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁(yè)效果(實(shí)例代碼)5. 解決Android studio xml界面無(wú)法預(yù)覽問(wèn)題6. 基于android studio的layout的xml文件的創(chuàng)建方式7. Android如何加載Base64編碼格式圖片8. Springboot Druid 自定義加密數(shù)據(jù)庫(kù)密碼的幾種方案9. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)10. 圖文詳解vue中proto文件的函數(shù)調(diào)用
網(wǎng)公網(wǎng)安備