Question

我有一个网站使用标签在不同的内容之间切换。在那个内容中，我有一盒设计元素。我想要发生的是，该框在所有选项卡中保持不变，而不重复六次或七次html。这可能吗？

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#design" data-toggle="tab">Cover Design</a></li>
  <li><a href="#video" data-toggle="tab">Video Trailers</a></li>
  <li><a href="#web" data-toggle="tab">Web Banner</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="design">
   <h2>Design Elements</h2>
   <ul>
     <li>This is the content that need to be static</li>
     <li>Skill: I'm skilled!</li>
     <li>Skill: I'm skilled!</li>
     <li>Skill: I'm skilled!</li>
   </ul>
   <p>Content that needs to be switched between tabs</p>
 </div>
</div>

任何帮助都会很精彩。我只在上面放置了一个标签来展示一个例子，如果我将它们全部发布，那么阅读时间太长了。

Answer 1

这就是你如何做到这一点......将你的静态内容从.tab-pane div中移出，但仍然在.tab-content div之下。 Live Example

<div class="tab-content">
    <h2>Design Elements</h2>
    <ul>
        <li>This is the content that need to be static</li>
        <li>Skill: I'm skilled!</li>
        <li>Skill: I'm skilled!</li>
        <li>Skill: I'm skilled!</li>
    </ul>
    <div class="tab-pane active" id="design">
        <p>Content that needs to be switched between tabs 1</p>
    </div>
    <div class="tab-pane" id="video">
        <p>Content that needs to be switched between tabs 2</p>
    </div>
    <div class="tab-pane" id="web">
        <p>Content that needs to be switched between tabs 3</p>
    </div>    
</div>

选项卡式内容中的bootstrap常量框

1 个答案: