欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手写tab切换 水平垂直居中

程序员文章站 2022-05-20 09:37:37
...

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

手写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>  
相关标签: tab切换