预览


scss 样式

@import 'common';//初始样式，可以不需要(这是我项目需要)  
  
/*body默认铺满整个屏幕*/  
body{  
	position: absolute;  
	bottom: 0;  
	top: 0;  
	left: 0;  
	right: 0;  
}  
#nav{  
	height: 2.8125rem;  
	background-color: white;  
	color: $gray;  
	@include flex(center, center);  
	.sub-item{  
		text-align: center;  
		-webkit-flex: 1;  
		flex: 1;  
		line-height: 2.8125rem;  
		width: 100%;  
		height: 100%;  
		border-bottom: none;  
  
	}  
}  
  
.selected{  
	border-bottom: 0.0625rem solid $textcolor!important;  
	color: $textcolor!important;  
}  
  
#main{  
	min-height: 100%;  
}

html

额外了解: swiper插件

<!DOCTYPE html>  
<html lang="en">  
<head>  
	<meta charset="UTF-8">  
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">  
	<title>投资计划</title>  
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">  
	<link rel="stylesheet" type="text/css" href="css/investplan.css">  
</head>  
<body>  
	<nav class="text-title1" id="nav">  
		<div class="sub-item selected" data-type="new-peo" data-num="0">回款中</div>  
		<div class="sub-item" data-type="earning" data-num="1">已回款</div>  
	</nav>  
	<div class="swiper-container" id="main">  
		<div class="swiper-wrapper">  
			<div class="swiper-slide">  
				1  
			</div>  
			<div class="swiper-slide">  
				2  
			</div>  
		</div>  
	</div>  
	<script src="js/jquery-3.1.1.min.js"></script>  
	<script type="text/javascript" src="js/swiper.min.js"></script>  
	<script type="text/javascript" src="js/classify.js"></script>  
</body>  
</html>

classify.js 自定义的 js

$(function(){  
	/*滑动切换*/  
	var swiper = new Swiper('.swiper-container', {  
  
		onSlideNextStart: function(swiper){  
		     $('.selected').next().addClass('selected');  
		     $('.selected').first().removeClass('selected');  
	    },  
	    onSlidePrevStart: function(swiper){  
	     	$('.selected').prev().addClass('selected');	      
	     	$('.selected').last().removeClass('selected');  
	     }  
  
	});  
	/*点击菜单切换*/  
	$('#nav .sub-item').click(function(){  
		  
		$('.selected').removeClass('selected');  
		$(this).addClass('selected');  
  
		var num = $(this).data('num');  
		swiper.slideTo(num, 500, false);  
	});  
});