手写tab切换 水平垂直居中
程序员文章站
2022-05-20 09:37:37
...
2个简单的tab标签,可以控制水平或者垂直显示
XML/HTML Code
<div id="horizontalTab">
<ul class="resp-tabs-list">
<li>Responsive Tab-1</li>
<li>Responsive Tab-2</li>
<li>Responsive Tab-3</li>
</ul>
<div class="resp-tabs-container">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
</div>
</div>
<br />
<br />
<!--vertical Tabs-->
<div id="verticalTab">
<ul class="resp-tabs-list">
<li>Responsive Tab 1</li>
<li>Responsive Tab 2</li>
<li>Responsive Tab 3</li>
<li>Long name Responsive Tab 4</li>
</ul>
<div class="resp-tabs-container">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<br />
JavaScript Code
<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
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
上一篇: NGUI制作聊天系统
下一篇: Swing 实现聊天系统 私发与群发