如何在应用程序中实现选项卡功能?

时间:2017-05-25 15:13:11

标签: javascript jquery

我试图在不使用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">

2 个答案:

答案 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元素。

Here's an updated jsbin