2013-03-11 58 views
1

Foundation 3的例子解释了如何使用列表设置标签,但是如何使用带有div布局的标签?带Div格式的Zurb-Foundation标签

<dl class="tabs"> 
    <dd class="active"><a href="#simple1">Simple Tab 1</a></dd> 
    <dd><a href="#simple2">Simple Tab 2</a></dd> 
    <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd> 
</dl> 
<ul class="tabs-content"> 
    <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li> 
    <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li> 
    <li id="simple3Tab">This is simple tab 3s content.</li> 
</ul> 

<div class="tabs-content"> 
    <div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li> 
    <div id="simple2Tab">This is simple tab 2s content. Now you see it!</div> 
    <div id="simple3Tab">This is simple tab 3s content.</div> 
</div> 

回答

2

将div添加到列表项中。

<ul class="tabs-content"> 
    <li class="active" id="simple1Tab"> 
    <div>This is simple tab 1s content. Pretty neat, huh?</div> 
    </li> 
    <li id="simple2Tab"> 
    <div>This is simple tab 2s content.</div> 
    </li> 
    <li id="simple3Tab"> 
    <div>This is simple tab 3s content.</div> 
    </li> 
</ul>