You are here
菜单滑动功能 有大用
星期一, 2018-05-28 08:49 — adminshiping1
1)引入css,js
| <link href="http://my.laravelweixintest.com/assets/front/css/swiper.3.1.7.min.css" rel="stylesheet" type="text/css" /> |
<script type="text/javascript" src="http://my.laravelweixintest.com/assets/front/js/swiper.3.1.7.jquery.min.js "></script>
2)html
| <div class="swiper-container" style="height:40px; background-color:#fff; line-height:40px; font-size:14px; color:#000000; text-align:left;"> | |
| <div id="myTab1" class="swiper-wrapper" style=" margin:0px; padding:0px; height:40px"> | |
| <div class="swiper-slide color bottom active" ><a href="#result_2" data="2" iscompany="0" val="free" data-toggle="tab">推荐</a></div> | |
| <div class="swiper-slide " ><a href="#result_1" data="1" iscompany="0" val="personal" data-toggle="tab">热点</a></div> | |
| <div class="swiper-slide " ><a href="#result_3" data="3" iscompany="0" val="personal" data-toggle="tab">搞笑</a></div> | |
| <div class="swiper-slide " ><a href="#result_21" data="21" iscompany="0" val="personal" data-toggle="tab">宣传</a></div> | |
| <div class="swiper-slide " ><a href="#result_4" data="4" iscompany="0" val="personal" data-toggle="tab">励志</a></div> | |
| <div class="swiper-slide " ><a href="#result_6" data="6" iscompany="0" val="personal" data-toggle="tab">旅游</a></div> | |
| <div class="swiper-slide " ><a href="#result_10" data="10" iscompany="0" val="personal" data-toggle="tab">教育</a></div> | |
| <div class="swiper-slide " ><a href="#result_12" data="12" iscompany="0" val="personal" data-toggle="tab">养生</a></div> | |
| <div class="swiper-slide " ><a href="#result_14" data="14" iscompany="0" val="personal" data-toggle="tab">科技</a></div> | |
| </div> | |
| </div> |
3) 进行js 设定
| <script> | |
| $(document).ready(function(){ | |
| $(".swiper-wrapper .swiper-slide").click(function(event){ | |
| $(this).addClass('color').siblings().removeClass('color'); | |
| $(this).addClass('bottom').siblings().removeClass('bottom'); | |
| $(".qiye span").removeClass('color-1').removeClass('bottom'); | |
| }); | |
| $(".qiye span").click(function(event){ | |
| $(this).addClass('color-1'); | |
| $(this).addClass('bottom'); | |
| $(".swiper-wrapper .swiper-slide").removeClass('color').removeClass('bottom'); | |
| var tagId = $(this).attr("data"); | |
| $("#tagId").val(tagId); | |
| var iscompany = $(this).attr("iscompany"); | |
| if(tagId==undefined || tagId=='') return false; | |
| $.ajax({ | |
| url: "/media/checkCharges.jhtml", | |
| type: "GET", | |
| data: { | |
| memberId : 581387, | |
| tagId : tagId | |
| }, | |
| dataType: "json", | |
| cache: false, | |
| beforeSend:function(){ | |
| $("#note").show() ;//显示加载时候的提示 | |
| }, | |
| success: function(data) { | |
| if(data.res=='1'){ | |
| if(iscompany==1){ | |
| $("#unBindId").hide(); | |
| $("#companyId").show(); | |
| $("#personId").hide(); | |
| }else{ | |
| $("#unBindId").hide(); | |
| $("#companyId").hide(); | |
| $("#personId").show(); | |
| } | |
| $(".sharePage").show(); | |
| $(".sharePagelayerBg").show(); | |
| }else{ | |
| $("#tagId").val(tagId); | |
| var searchProperty = $("#searchProperty").val(); | |
| var searchValue = $("#keyword").val(); | |
| $("#contentId").html(''); | |
| getContentList(1, tagId, searchProperty, searchValue); | |
| } | |
| $("#note").hide(); | |
| } | |
| }) | |
| }) | |
| }) | |
| </script> |
普通分类: