2个简单的tab标签，可以控制水平或者垂直显示

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>

 

原文地址:http://www.freejs.net/article_tabbiaoqian_200.html