基于jquery實現手機端觸屏滑動選項卡切換



55 217 73



特效描述:基于jquery實現 手機端 觸屏滑動 選項卡切換,基于jquery實現手機端觸屏滑動選項卡切換

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/idangerous.swiper.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>

3. HTML代碼

<div class="wrap">
    <div class="tabs">
        <a href="#" hidefocus="true" class="active">手機端</a>
        <a href="#" hidefocus="true">選項卡</a>
        <a href="#" hidefocus="true">切換效果</a>
    </div>    
    <div class="swiper-container">
        <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>前端特效 - www.cqetom.live</h2>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
          </div>
          </div>
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>前端特效 - www.cqetom.live</h2>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
          </div>
          </div>
        <div class="swiper-slide">
            <div class="content-slide">
            <h2>前端特效 - www.cqetom.live</h2>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
            <p>51前端讓開發更簡單</p>
          </div>
          </div>
      </div>
   </div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script> 
<script type="text/javascript">
var tabsSwiper = new Swiper('.swiper-container',{
	speed:500,
	onSlideChangeStart: function(){
		$(".tabs .active").removeClass('active');
		$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
	}
});
$(".tabs a").on('touchstart mousedown',function(e){
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());
});
$(".tabs a").click(function(e){
	e.preventDefault();
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子