生活随笔
收集整理的這篇文章主要介紹了
WebAPI(part7)--Tab栏切换案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必究
Web API
Tab欄切換案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">高等數理統計
</li><li>百面深度學習
</li><li>機器學習
</li><li>強化學習
</li><li>遷移學習
</li></ul></div><div class="tab_con"><div class="item" style="display: block;">陳希孺
</div><div class="item">葫蘆娃
</div><div class="item">周志華
</div><div class="item">高揚
</div><div class="item">強子
</div></div></div><script>var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');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 = '';}this.className = 'current';var index = this.getAttribute('index');console.log(index);for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}items[index].style.display = 'block';}}</script>
</body></html>
默認在高等數理統計：
點擊強化學習：
可以看到，內容隨著標簽的改變有了變化。
總結
以上是生活随笔為你收集整理的WebAPI(part7)--Tab栏切换案例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
