tab切换实现方式1
生活随笔
收集整理的這篇文章主要介紹了
tab切换实现方式1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
tab切換實現方式1：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab切換回顧</title><style>* {margin: 0;padding: 0;list-style: none;}#wrap {width: 600px;margin: 100px auto 0;overflow: hidden;}#tit {height: 30px;}#tit span {float: left;width: 200px;height: 30px;line-height: 30px;text-align: center;font-size: 18px;background: #ccc;}#tit span.select {background: #333;color: #ccc;}#con {width: 560px;padding: 20px;overflow: hidden;background: pink;}#con li {height: 200px;line-height: 200px;text-align: center;font-size: 100px;display: none;}#con li.show {display: block;}</style> </head> <body><div id="wrap"><div id="tit"><span class="select">選項一</span><span>選項二</span><span>選項三</span></div><ul id="con"><li class="show">1111</li><li>2222</li><li>3333</li></ul></div><script>var tit = document.getElementById('tit');var con = document.getElementById('con');var spans = tit.children;var lis = con.children;// console.log(lis.length);for (var i = 0; i < spans.length; i++) {spans[i].index = i;spans[i].onclick = function() {for (var i = 0; i < spans.length; i++) {spans[i].className = '';lis[i].className = '';}this.className = 'select';lis[this.index].className = 'show';}}</script> </body> </html>
轉載于:https://www.cnblogs.com/handsomehan/p/5910046.html
總結
以上是生活随笔為你收集整理的tab切换实现方式1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： shiro +spring + spri
- 下一篇： HTTP状态码解读