Amaze js插件选项卡竖置

最新推荐文章于 2022-12-24 12:04:58 发布

zoujiawei6

最新推荐文章于 2022-12-24 12:04:58 发布

阅读量2k

点赞数

分类专栏：问题解决文章标签： Amaze选项卡竖置

本文链接：https://blog.csdn.net/zoujiawei6/article/details/50788904

版权

问题解决专栏收录该内容

25 篇文章 2 订阅

订阅专栏

首先你得有Amaze框架：http://amazeui.org/getting-started

以下代码只供参考。

css：

<style type="text/css">
	.am-nav-ver{
		float:left;
	}
	.am-nav-ver>li{
		float:none;
	}
	.am-tabs{
		overflow:hidden;/*父元素高度自适应*/
	}
	.am-tabs-ver{
		border: 1px solid transparent;
	}
	.am-nav>li+li {
    	margin-top: 0px;
	}
	.am-nav>li{
		border-bottom: 1px solid #ddd;
		border-right:1px solid #ddd;
	}
	.am-nav-tabs>li{
		border-bottom: 0px;
		border-right: 0px;
	}
	.am-nav-tabs>li>a {
		border: 1px solid #ddd;
	}
	.am-nav-tabs>li.am-active>a, .am-nav-tabs>li.am-active>a:focus, .am-nav-tabs>li.am-active>a:hover {
		border-right-color: transparent;
		border-bottom-color: #ddd;
	}
	.am-nav-tabs>li>a {
		margin-right: 0px;
	}
  </style>

html：

<div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
  <ul class="am-tabs-nav am-nav am-nav-ver"><!-- 可以试着加上此class: am-nav-tabs -->
    <li class="am-active"><a href="javascript: void(0)">流浪</a></li>
    <li><a href="javascript: void(0)">流浪</a></li>
    <li><a href="javascript: void(0)">再流浪</a></li>
  </ul>
  <div class="am-tabs-bd am-tabs-ver">
    <div class="am-tab-panel am-active">
      ...
    </div>
    <div class="am-tab-panel">
      ...
    </div>
    <div class="am-tab-panel">
      ...
    </div>
  </div>
</div>