nav-tabs nested

Navigation
0

Friends I have a nav-bar which is called a nav-tabs1 and I would like it to have another nav-tabs2 just that when I enter all the options that are called after the nav-bar does not stay in the nav-tab1, it is open empty and goes to nav-tab2. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
     <div class="container">
      <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#principal">Principal</a></li>
    <li><a data-toggle="tab" href="#menu1.1">Menu 1.1</a></li>
    <li><a data-toggle="tab" href="#menu1.2">Menu 1.2</a></li>
    <li><a data-toggle="tab" href="#menu1.3">Menu 1.3</a></li>
  </ul>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    
    <div id="menu1.1" class="tab-pane fade">
      <h3>Menu 1.1</h3>
      <p>TESTANDO ACESSO AO MENU 1.1.</p>
    </div>
    
    <div id="menu1.2" class="tab-pane fade">
      <h3>Menu 1.2</h3>
      <p>TESTANDO ACESSO AO MENU 1.2.</p>
    </div>
    <div id="menu1.3" class="tab-pane fade">
      <h3>Menu 1.3</h3>
      <p>TESTANDO ACESSO AO MENU 1.3.</p>
    </div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>
    
asked by anonymous 30.05.2018 / 18:03

1 answer

0

From what I understood what you need would be this as below:

PS1: Do not use "." for ID selector, it can be broken in css and js.  PS2: Better organize code, comments, and indentations to separate sessions from the site can be useful when you have more than one element of the same type coexisting. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
     <div class="container">
      <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#principal">Principal</a></li>
    <li><a data-toggle="tab" href="#menu1a">Menu 1.1</a></li>
    <li><a data-toggle="tab" href="#menu1b">Menu 1.2</a></li>
    <li><a data-toggle="tab" href="#menu1c">Menu 1.3</a></li>
  </ul>


      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<div id="menu1a" class="tab-pane fade">
        <h3>Menu 1.1</h3>
        <p>TESTANDO ACESSO AO MENU 1.1.</p>
        </div>
        
        <div id="menu1b" class="tab-pane fade">
        <h3>Menu 1.2</h3>
        <p>TESTANDO ACESSO AO MENU 1.2.</p>
        </div>
        <div id="menu1c" class="tab-pane fade">
        <h3>Menu 1.3</h3>
        <p>TESTANDO ACESSO AO MENU 1.3.</p>
        </div>

    </div>
    
    
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>
    
30.05.2018 / 19:38
script to format worksheet Doubt with socket.emit