组件-选项卡

<button class="bny-btn" hx-get="/test/data/tab01.html" hx-target="#tab01>.head"
    hx-swap="beforeend">添加选项卡</button>

<div hx-ext="bny-tab" hx-trigger="mouseover" id="tab01" index="1">
    <ul class="head">
        <li closable>选项卡1</li>
        <li closable>选项卡2</li>
        <li closable>选项卡3</li>
    </ul>
    <div class="body">
        <div> 选项卡1的内容 </div>
        <div> 选项卡2的内容 </div>
        <div> 选项卡3的内容 </div>
    </div>
</div>

<div hx-ext="bny-tab" mode="scroll" style="width: 400px;">
    <ul class="head">
        <li closable>选项卡11</li>
        <li>选项卡22</li>
        <li hx-get="/test/data/tab02body.html">选项卡33</li>
        <li>选项卡44</li>
        <li>选项卡55</li>
        <li>选项卡66</li>
        <li>选项卡77</li>
    </ul>
    <div class="body">
        <div> 选项卡11的内容 </div>
        <div> 选项卡22的内容 </div>
        <div> 选项卡33的内容 </div>
        <div> 选项卡44的内容 </div>
        <div> 选项卡55的内容 </div>
        <div> 选项卡66的内容 </div>
        <div> 选项卡77的内容 </div>
    </div>
</div>