Tab栏切换布局分析
生活随笔
收集整理的這篇文章主要介紹了
Tab栏切换布局分析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后包裝</li><li>商品評價(50000)</li><li>手機社區</li></ul></div></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價(50000)模塊內容</div><div class="item">手機社區模塊內容</div></div></body>
*{margin: 0;padding: 0;}.tab_list ul{margin-top: 50px;margin-left: 200px;background-color: #e8e8e8;width: 800px;height: 39px;border: 1px solid red;}.tab_list li{list-style: none;float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current{background-color: red;color: white;}/* .item-info{padding: 20px 0 0 20px;} */.tab_con{margin-left: 200px;}.item{color: #686868;display: none;}
<script type="text/javascript">var lis = document.querySelector('.tab_list').querySelectorAll('li');var items = document.querySelectorAll('.item');// 1、進行排他思想創建點擊事件，使得每次點擊時，被點擊的li的屬性為‘current’,其余的為空//給獲取li的lis添加循環綁定事件(排他思想)，進行點擊事件for (var i = 0; i < lis.length; i++) {//2.1、此時給li添加設置索引號 屬性名為indexlis[i].setAttribute('index',i);lis[i].onclick = function(){//干掉所有人，其余的li清除 class 這個類for (var i = 0; i < lis.length; i++) {lis[i].className = '';}//留下本身自己this.className = 'current';// 2、下面顯示內容模塊//2.2、獲取index 中的屬性值var index = this.getAttribute('index');console.log(index);//2.3、點擊lis時，使得items的內容進行顯示// items[index].style.display = 'block';//2.4、干掉所有人，只讓被選中的item內容進行顯示for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}//留下自己，進行顯示items[index].style.display = 'block';}}</script>
實現效果：
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Tab栏切换布局分析的全部內容，希望文章能夠幫你解決所遇到的問題。
