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