web前端選項卡的寫法
阿新 • • 發佈:2019-02-16
tab選項卡的一種寫法
css: <style type="text/css"> input{ background: white; } .active{ background: yellow; } div{ width: 100px; height:100px; background: #ccc; border: 1px solid red; display: none; } </style> javascript: <script type="text/javascript"> window.onload=function(){ var aBtn=document.getElementsByTagName('input'); var divOne=document.getElementsByTagName("div"); var i=0; for(i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function(){ for(i=0;i<aBtn.length;i++){ aBtn[i].className=""; divOne[i].style.display="none" } divOne[this.index].style.display="block"; this.className="active"; } } } </script> html: <input type="button" class="active" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block;" > aaaaaaaaaaaaa </div> <div > abbbbbbbbbbbbbbbbbb </div> <div > ddddddddddddddddd </div>
二種
jquery:
$(document).ready(function(){ var liClick=$("#ul1 li"); /*alert(liClick.length);*/ liClick.click(function(){ /*alert($(this).index());*/ $(".hides").hide(); $("#div_"+$(this).index()).show(); }); }); html: <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <ul id="ul1"> <li class="lix"> 應用 </li> <li>註冊</li> <li>告警</li> <li>未註冊</li> </ul> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="div_0" class="hides ui-widget-content ui-corner-all" style="display: block;"> <div class="div1" style="height: 500px;"> 11111111xxxxxxxxxxxxzzzz </div> </div> <div id="div_1" class="hides ui-widget-content ui-corner-all"> <div class="div1" style="height: 500px;"> 22222222ddddddddddddd </div> </div> <div id="div_2" class="hides ui-widget-content ui-corner-all"> <div class="div1" style="height: 500px;"> 33333333rrrrrrrrrrrrrrrrr </div> </div> <div id="div_3" class="hides ui-widget-content ui-corner-all"> <div class="div1" style="height: 500px;"> 444444444tttttttttttttttt </div> </div> </div> </div> css: <style type="text/css"> ul,li{ margin: 0px; padding: 0px; } #ul1{ list-style-type: none; height:20px; } #ul1 li{ float: left; margin-right: 10px; cursor: pointer; padding:10px 20px; } .lix{ border:1px solid #030A10; padding:10px 20px; border-color: rgba(0,0,0,.4); background: rgba(0,0,0,.1); } .hides{ display: none; } </style>