Common bootstrap tabs / pills content

1

Use bootstrap tab / pills and tab content is almost the same, differentiating only a few fields. Is there a way to take advantage of what's common between them?

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 3</a></li>
</ul>
<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
     <h3>HOME</h3>
     <p>Campo A</p>
     <p>Campo B</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>MENU 1</h3>
    <p>Campo A</p>
    <p>Campo B</p>
    <p>Campo C</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>MENU 2</h3>
    <p>Campo A</p>
    <p>Campo B</p>
    <p>Campo D</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>MENU 3</h3>
    <p>Campo X</p>
    <p>Campo Y</p>
    <p>Campo Z</p>
  </div>    
</div>
    
asked by anonymous 31.05.2016 / 12:01

0 answers