0

我有一个使用标签在不同内容之间切换的网站。在那个内容中，我有一盒设计元素。不过，我希望该框在所有选项卡中保持不变，而无需为其重复 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>

任何帮助都会很棒。我只在上面放了一个标签来显示一个例子，如果我把它们都贴出来，那么阅读时间太长了。

4

1 回答 1

1

这就是您可以完成此操作的方法...将您的静态内容从.tab-panediv 中取出，但仍在.tab-contentdiv 下。 现场示例

<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>
于 2013-08-09T15:05:19.457 回答