简介

easyRespoiveTabs.js是一款轻量级的响应式 Tab 选项卡手风琴JQuery插件，默认为水平垂直Tab选项卡样式。

使用

1.  引入 JQuery.js 和  easyRespoiveTabs.js文件

2.  HTML

<div class="sap_tabs">
		<div id="horizontalTab"
			style="display: block; width: 100%; margin: 0px;">
			<ul class="resp-tabs-list">
				<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"
					style="font-size: 20px"><span>选项卡1</span></li>
				<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"
					style="font-size: 20px"><span>选项卡2</span></li>
				<div class="clearfix"></div>
			</ul>
			<div class="resp-tabs-container">
				<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
					<div class="tab_img grid">
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g1.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g2.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g3.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
					<div class="tab_img grid">
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g9.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g10.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="col-md-3 img-top ">
							<a href="#" rel="title"
								class="b-link-stripe b-animate-go  thickbox" target="_blank">
								<figure class="effect-apollo"> <img
									src="images/photowall/g11.jpg" alt="" /> <figcaption>
								</figcaption> </figure>
							</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

3.  调用

<script type="text/javascript">
			    $(document).ready(function () {
			        $('#horizontalTab').easyResponsiveTabs({
			            type: 'default', //Types: default, vertical, accordion           
			            width: 'auto', //auto or any width like 600px
			            fit: true   // 100% fit in a container
			        });
			    });
				
</script>