技巧教程 在侧边栏小工具使用选项卡

[死了算了]

<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="url to the content"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="widget key 1">Tab title 1</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 2"
                        role="tab">Tab title 2</a>
                 <a href="url to the content"
                        class="tabs-tab"
                        id="widget key 3"
                        role="tab">Tab title 3</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="widget key 1">
                 <xf:widget key="widget key 1" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 2">
                 <xf:widget key="widget key 2" />
             </li>
             <li role="tabpanel" aria-labelledby="widget key 3">
                 <xf:widget key="widget key 3" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

以最新主题，最近回帖和最近个人动态为例

<div class="block">
    <div class="block-container">
         <h2 class="widget-tabs block-tabHeader tabs hScroller" data-xf-init="tabs h-scroller" data-state="replace" role="tablist">
             <span class="hScroller-scroll">
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab is-active"
                        role="tab"
                        aria-controls="tab_lastest_threads">Latest threads</a>
                 <a href="{{ link('whats-new/posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_post"
                        role="tab">New posts</a>
                 <a href="{{ link('whats-new/profile-posts/') }}?skip=1"
                        class="tabs-tab"
                        id="tab_lastest_profile_post"
                        role="tab">Latest profile posts</a>
             </span>
         </h2>
         <ul class="tabPanes widget--tab">
             <li class="is-active" role="tabpanel" id="tab_lastest_threads">
                 <xf:widget key="tab_lastest_threads" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_lastest_post">
                 <xf:widget key="tab_lastest_post" />
             </li>
             <li role="tabpanel" aria-labelledby="tab_lastest_profile_post">
                 <xf:widget key="tab_lastest_profile_post" />
             </li>
         </ul>
     </div>
</div>
<xf:css>
.widget-tabs {
    overflow: hidden;
    .tabs-tab {font-size: 13px;}
}
.widget--tab .block-minorHeader {display:none;}
</xf:css>

 

[删除会员 231]

添加在哪？

 

[小关]

教程不全，需要我帮忙再写一个吗

 

[xiaoshan]

添加到哪里啊？