css,js手寫tab切換(pc)
阿新 • • 發佈:2018-11-15
不論是swiper還是mui的tab切換都存在高度問題。想來想去還是自己寫
html
<div class="wrapper"> <div class="main"> <h4 id="title"> <span class="on">退款中</span> <span>已退款</span> </h4> <div id="con"> <ul class="on"> <div class="f-j-sb p-10 b-g-white"> <div> <p>A桶×3</p> <p>B桶×3</p> <p>C桶×3</p> </div> <div> <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p> </div> <div class="m-r-30 t-c"> <p>送水師傅上門收桶</p> <p>合計:<span class="red">¥10.00</span></p> <button class="quxiao">取消退桶</button> </div> </div> <div class="f-j-sb p-10 b-g-white m-t-20"> <div> <p>A桶×3</p> <p>B桶×3</p> <p>C桶×3</p> </div> <div> <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p> </div> <div class="m-r-30 t-c"> <a href="Qr-code.html"><p class="f-c-blue">展示二維碼</p></a> <p>合計:<span class="red">¥10.00</span></p> <button class="quxiao">取消退桶</button> </div> </div> </ul> <ul> <div class="f-j-sb p-10 b-g-white"> <div> <p>A桶×3</p> <p>B桶×3</p> <p>C桶×3</p> </div> <div> <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p> </div> <div class="m-r-30 t-c"> <p>送水師傅上門收桶</p> <p>退款成功</p> <button class="quxiao">檢視詳情</button> </div> </div> </ul> </div> </div> </div>
css
.t-c{ text-align: center; } .red{ color: red; font-size: 16px; } .quxiao { height: 25px; border: 1px solid #0090FF; color: #0090FF; line-height: 0.5; margin-top: 10px; } .main { width: 400px; margin: 0 auto; } #title { height: auto; display: flex; background: white; padding: 10px 0; font-weight: normal } #title span { float: left; width: 50%; height: 30px; margin-right: 5px; color: #333; background: white; text-align: center; cursor: pointer; font-size: 17px } #title span.on { color: #0090FF; border-bottom: 2px solid #0090FF } #con { height: auto; } #con ul { display: none; } #con ul.on { display: block; } #con ul li { height: 24px; line-height: 24px; border-bottom: 1px dotted #ccc; text-indent: 10px; }
js
//tab var oTitle = document.getElementById('title'); var aSpan = oTitle.getElementsByTagName('span'); var oCon = document.getElementById('con'); var aUl = oCon.getElementsByTagName('ul'); var i = 0; for (i = 0; i < aSpan.length; i++) { aSpan[i].index = aUl[i].index = i; aSpan[i].onclick = function () { for (i = 0; i < aSpan.length; i++) { aSpan[i].className = ''; aUl[i].className = ''; } this.className = 'on'; aUl[this.index].className = 'on'; } }
起碼不用擔心高度問題。