我试图在不使用js
的情况下实现标签功能。我从这里得到了示例
https://ampbyexample.com/advanced/tab_panels_with_amp-selector/
当我只有two
个标签时,我可以使用此示例。
看输出
https://jsbin.com/vixaquloki/edit?html,output
但是当我尝试在另一个标签页面中制作嵌套标签" 标签时#34; 。。什么都不显示。为什么? 看我的代码
但是当我点击tab one
时,它会在tabs
内显示..但是当我点击"在标签1" 中时,它会隐藏所有内容为什么?
<amp-selector role="tablist"
layout="container1"
class="ampTabContainer">
<div role="tab"
class="tabButton"
selected
option="a">Tab one</div>
<div role="tabpanel"
class="tabContent">
答案 0 :(得分:2)
问题是选定的命令正在发生冲突 我只是从内部标签中删除了所选的命令
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
.ampTabContainer {
display: flex;
flex-wrap: wrap;
}
.tabButton[selected] {
outline: none;
background: #ccc;
}
.tabButton {
list-style: none;
flex-grow: 1;
text-align: center;
cursor: pointer;
}
.tabContent {
display: none;
width: 100%;
order: 1; /* must be greater than the order of the tab buttons to flex to the next line */
border: 1px solid #ccc;
}
.tabButton[selected]+.tabContent {
display: block;
}
/* For example below (not required) */
.itemCustom {
border: 1px solid #000;
height: 280px;
width: 380px;
margin: 10px;
text-align: center;
padding-top: 140px;
}
amp-selector {
padding: 1rem;
margin: 1rem;
}
</style>
<amp-selector role="tablist" layout="container1" class="ampTabContainer">
<div role="tab" class="tabButton" selected option="a">Tab one</div>
<div role="tabpanel" class="tabContent">
<div>one div
<amp-selector role="tablist" layout="container" class="ampTabContainer">
<div role="tab" class="tabButton" option="a">inside Tab one</div>
<div role="tabpanel" class="tabContent">Tab one content... </div>
<div role="tab" class="tabButton" option="b">Tab two</div>
<div role="tabpanel" class="tabContent">Tab two content... </div> </amp-selector> </div> </div>
<div role="tab"
class="tabButton"
option="b">Tab two</div>
<div role="tabpanel"
class="tabContent">Tab two content... </div>
</amp-selector>
答案 1 :(得分:0)
从
中删除selected
<div role="tab"
class="tabButton"
selected
option="a">inside Tab one</div>
更新
我认为你想要显示标签1和标签1中的内容。
要允许多个选择,请将多个属性添加到amp-selector
元素。