Question

我想在工作选项卡中添加内容。（下面的链接）请告诉我如何解决？

访问https://codepen.io/benfrain/pen/wJgZYP

我在html中添加内容类的内容

<div class="pn-ProductNav_Wrapper">
<nav id="pnProductNav" class="pn-ProductNav">
    <div id="pnProductNavContents" class="pn-ProductNav_Contents">
        <a href="#" class="pn-ProductNav_Link" aria-selected="true">Chairs</a>
        <a href="#" class="pn-ProductNav_Link">Tables</a>
        <a href="#" class="pn-ProductNav_Link">Cookware</a>
        <a href="#" class="pn-ProductNav_Link">Beds</a>
        <a href="#" class="pn-ProductNav_Link">Desks</a>
        <a href="#" class="pn-ProductNav_Link">Flooring</a>
        <a href="#" class="pn-ProductNav_Link">Lighting</a>
        <a href="#" class="pn-ProductNav_Link">Mattresses</a>
        <a href="#" class="pn-ProductNav_Link">Solar Panels</a>
        <a href="#" class="pn-ProductNav_Link">Bookcases</a>
        <a href="#" class="pn-ProductNav_Link">Mirrors</a>
        <a href="#" class="pn-ProductNav_Link">Rugs</a>  
        <a href="#" class="pn-ProductNav_Link">Curtains &amp; Blinds</a>  
        <a href="#" class="pn-ProductNav_Link">Frames &amp; Pictures</a>  
        <a href="#" class="pn-ProductNav_Link">Wardrobes</a>  
        <a href="#" class="pn-ProductNav_Link">Storage</a>  
        <a href="#" class="pn-ProductNav_Link">Decoration</a>  
        <a href="#" class="pn-ProductNav_Link">Appliances</a>
         <a href="#" class="pn-ProductNav_Link">Racks</a>
        <a href="#" class="pn-ProductNav_Link">Worktops</a>
    </div>

</nav>
    <button id="pnAdvancerLeft" class="pn-Advancer pn-Advancer_Left" type="button">
        <svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M445.44 38.183L-2.53 512l447.97 473.817 85.857-81.173-409.6-433.23v81.172l409.6-433.23L445.44 38.18z"/></svg>
    </button>
    <button id="pnAdvancerRight" class="pn-Advancer pn-Advancer_Right" type="button">
        <svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M105.56 985.817L553.53 512 105.56 38.183l-85.857 81.173 409.6 433.23v-81.172l-409.6 433.23 85.856 81.174z"/></svg>
    </button>
</div>

这是JavaScript 访问https://codepen.io/benfrain/pen/wJgZYP

谢谢

Answer 1

有一个简单的解决方案。首先，您必须替换为，因为锚点上的click事件不会传播。其次，向每个跨度添加一个属性，例如data-tab-id =“ div1”，因此对于...第三，添加具有与跨度中定义的ID匹配的div的div，默认情况下，设置为仅可见第一分区这些div将包含您要显示的内容。现在，在每个跨度的onclick事件上，获取属性data-tab-id的值，然后首先隐藏所有div，并仅显示具有匹配ID的div，仅此而已，您将使用一个制表符控件100％。

在滚动工作选项卡中添加内容

1 个答案: