基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js-优快云博客

一款基于jQuery的响应式Tab选项卡/手风琴插件，提供水平和垂直两种样式，适合不同布局需求。简单易用，只需下载插件文件并引入到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述：是一款轻量级的响应式 Tab 选项卡/手风琴jQuery插件，默认为水平/垂直Tab选项卡样式。

使用方法：

1）下载easyResponsiveTabs.js插件

2）引入js文件

<head>      
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">      
<title>fullPageDemo</title>      
      
<script src="js/jquery-1.8.3.min.js"></script>      
<script src="js/easyResponsiveTabs.js"></script>      
      
</head>

3）引入自定义CSS样式文件
4）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>

5）JavaScript脚本

<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>

6）运行代码即可