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>

實現效果：

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248240.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248240.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248240.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！