Common bootstrap tabs/pills content

Asked

Viewed 298 times

1

Bootstrap tab/pills and tabs content are almost equal, differentiating only a few fields. There’s a way to make the most of what they have in common?

<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>
jquery html bootstrap

  • You can also share the relevant code and tell us exactly what you want sff

  • I don’t think that only with the default bootstrap functionality can do this, you have to use jquery/javascript

  • No problem.... you have some suggestion?

  • Give me a few minutes, I’ll do with jquery

  • tabs and pills? are the same structure the only thing that changes is the class nav-pills for nav-tabs

  • The only thing you can systematize is on the server, generate this HTML in an organized way. What language do you have on the server? Otherwise I don’t see that you can "save" in HTML since it’s not a programming language where you can save variables or make loops to generate content.

Show 1 more comment
No answers

Browser other questions tagged jquery html bootstrap

You are not signed in. Login or sign up in order to post.