jquery选项卡点击且能滑动特效

最新推荐文章于 2023-02-13 06:26:15 发布

Cryday

最新推荐文章于 2023-02-13 06:26:15 发布

阅读量790

点赞数

本文链接：https://blog.csdn.net/Cryday/article/details/84562917

版权

<style>
	*{margin:0;padding:0;}
	li{list-style: none}
	#centent{
		width:100%;
		height:100%;
	}
	.tab{
		width:100%;
		overflow: hidden;
	}
	.tab ul li{
		width:50%;
		float:left;
		height:40px;
		text-align: center;
		line-height: 40px;
		font-size:20px;
		color:#333;
	}
	.active{
		color:red;
		border-bottom:1px solid red;
	}
	.slideT .swiper-slide{
		height:300px;
	}
</style>
<body>
	<div id="centent">
		<div class="tab">
			<ul>
				<li class="active">村领导</li>
				<li>村民</li>
			</ul>
		</div>
		<div class="swiper-container">
		    <div class="swiper-wrapper slideT">
		        <div class="swiper-slide">Slide 1</div>
		        <div class="swiper-slide">Slide 2</div>
		    </div>
		</div>
	</div>
	<script>
		var mySwiper = new Swiper ('.swiper-container', {
			initialSlide:0,
	        autoplay:false,
	        keyboardControl:true,
	        autoHeight:true,
	        observer:true,
	        observeParents:true,
	        on: {
			    slideChangeTransitionStart: function(){
			      	$(".tab .active").removeClass('active')
	           		$(".tab li").eq(mySwiper.activeIndex).addClass('active')
			    },
			},
		})
		$(function(){
			$(".tab li").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
				var index = $(this).index();
				mySwiper.slideTo($(this).index())
			})
		})
	</script>