html實現tab頁及切換
阿新 • • 發佈：2018-12-26
效果圖如下：
tab切換通過js和jquery實現，程式碼如下（主要是調css樣式比較麻煩，其他的都比較簡單）：
1、頁面切換通過js實現（有點繁瑣，每個tab都要寫一個onclick方法）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> .contentwrap { width: 98%; margin: 0 auto; padding: 10px; } ul { list-style: none; margin: 0; padding-left: 20px; } ul.tab { border-bottom: 1px solid #ccc; padding-bottom:1px; height: 30px; line-height: 30px; color: #696969; } ul.tab li { float: left; font-family: "微軟雅黑"; cursor: pointer; padding: 0px; } ul.tab li.li { padding: 0px 25px 0px; font-size: 13px; height: 30px; line-height: 30px; background:#F4F5F9; border-top: 1px solid #C5D0DC; border-left: 1px solid #C5D0DC; border-bottom: 1px solid #C5D0DC; } ul.tab li.current { border-bottom: 0px; border-top: 2px solid #7599DE; font-size: 13px; color: #343434; background:#FFFFFF; } ul.tab li.li:last-child{border-right: 1px solid #C5D0DC;} </style> </head> <body> <div id="contentwrap" class="contentwrap"> <ul class="tab"> <li id="li_stage" class="li current" onclick="toStageInfo()"><span>tab1</span></li> <li id="li_class" class="li" onclick="toClaRecordDetail()"><span>tab2</span></li> <li id="li_photo" class="li" onclick="toTrainPhoto()"><span>tab3</span></li> </ul> </div> </body> <script> function toStageInfo() { document.getElementById("li_stage").className="li current"; document.getElementById("li_class").className="li"; document.getElementById("li_photo").className="li"; } function toClaRecordDetail() { document.getElementById("li_stage").className="li"; document.getElementById("li_class").className="li current"; document.getElementById("li_photo").className="li"; } function toTrainPhoto() { document.getElementById("li_stage").className="li"; document.getElementById("li_class").className="li"; document.getElementById("li_photo").className="li current"; } </script> </html>
2、頁面切換通過jquery實現：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> ..... </style> </head> <body> <div id="contentwrap" class="contentwrap"> <ul class="tab"> <li id="li_stage" class="li current"><span>tab1</span></li> <li id="li_class" class="li"><span>tab2</span></li> <li id="li_photo" class="li"><span>tab3</span></li> </ul> </div> </body> <script> $(function(){ $('#tab > li').on("click",function(){ var num=$(this).index(); //var src=basePath+urlArr[num]; $('#tab > li').each(function(){ if($(this).index()==num){ $(this).attr("class","li current"); }else{ $(this).attr("class","li"); } }); //$('#classify_iframe').attr("src",src); }); }); </script> </html>