利用swiper實現tab頁效果
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html lang="en" style="font-size: 54.9333333333333px;"> <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> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="css/swiper.css"> <script src="js/swiper.js"></script> <style> .tab { position: absolute; top: 0px; left: 0px; width: 100%; height: 0.86rem; z-index: 20; display: flex; -webkit-box-align: center; align-items: center; justify-content: space-around; padding-left: 0.2rem; padding-right: 0.2rem; box-sizing: border-box; background: #fff; } .nav { width: 100%; } .fieldName { text-align: center; height: 0.84rem; line-height: 0.84rem; font-size: 15px; } body { background: #fff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .naactive { padding: 0 25px; width: auto; border-bottom: none; color: #727171 } .myactive { border-bottom: 2px solid #fe0000; color: #fe0000 } .main { padding-top: 1rem; padding-bottom: 1rem; } .noshow { display: none; } </style> </head> <body style="background-color: #ccc"> <div class="tab"> <div class="swiper-container nav"> <div class="swiper-wrapper" id="nav"> <div class="swiper-slide myactive naactive" data-itemid="0"> <div class="fieldName">全部</div> </div> </div> </div> </div> <div class="main"> <div id="id0" class="no">0</div> <div id="id1" class="no noshow">1</div> <div id="id2" class="no noshow">2</div> <div id="id3" class="no noshow">3</div> <div id="id4" class="no noshow">4</div> <div id="id5" class="no noshow">5</div> <div id="id6" class="no noshow">6</div> <div id="id7" class="no noshow">7</div> </div> <script> var data = [{ "name": "全部" }, { "name": "1" }, { "name": "2" }, { "name": "3" }, { "name": "3" }, { "name": "4" } ]; var ht = ""; $.each(data, function (i, v) { ht += '<div class="swiper-slide naactive" data-itemid=' + (i + 1) + '>' + '<div class="fieldName">' + v .name + '</div></div>'; }); $("#nav").append(ht); var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: false, freeMode: true, // slide 是否貼合側邊 slidesPerView: 'auto', freeModeSticky: true, roundLengths: true, //防止文字模糊 observer: true, //修改swiper自己或子元素時，自動初始化swiper observeParents: true, //修改swiper的父元素時，自動初始化swiper initialSlide: 0, }); $('.naactive').on('click', function (e) { $(".naactive").removeClass('myactive'); $(this).addClass('myactive'); $(".no").addClass('noshow'); var item = $(this).attr("data-itemid"); $("#id" + item).removeClass('noshow'); }); </script> </body> </html>