Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery / Twitter Bootstrap

Control Multiple Tab-contents With One Nav-tabs

Post a Comment
I have a regular Twitter Bootstrap 3 tab. What I want to do is to control is to control multiple tab-content container with one nav-tabs element. Here is an example: jsfiddle In th

Solution 1:

Here I update your jsfiddle

I add the data-target attribute to a-elements and change ids in second tab-content

I modified this lines,

Yours:

<liclass="active"><ahref="#home"data-toggle="tab">C1</a></li><li><ahref="#profile"data-toggle="tab">C2</a></li>

My update: 

<liclass="active"><ahref="#home"data-target="#home, #home_else"data-toggle="tab">C1</a></li><li><ahref="#profile"data-target="#profile, #profile_else"data-toggle="tab">C2</a></li>

And the second tab-content, Yours:

<divid="myTabContent"class="tab-content"><divclass="tab-pane fade in active"id="home"><p>Content 1.</p></div><divclass="tab-pane fade"id="profile"><p>Content 2.</p></div></div>

My update:

<divid="myTabContent2"class="tab-content"><divclass="tab-pane fade in active"id="home_else"><p>Content 1.</p></div><divclass="tab-pane fade"id="profile_else"><p>Content 2.</p></div></div>

Solution 2:

You should just use a class instead. I just was working on Bootstrap 3 tabbed content inside a modal window. Was trying to get the modal window to open to the correct tab, but I needed two tabs to open, one for the modal header, and one for the content, with extra nab tabs in the footer.

I used a class and it worked. So, change <div class="tab-pane fade in active" id="home"> to <div class="tab-pane fade in active home"> and <a href="#home" data-toggle="tab"> to <a href=".home" data-toggle="tab"> ... worked for me.

Solution 3:

ID must be unique.

Read Two HTML elements with same id attribute: How bad is it really?

problem with your code

Two elements with id home , profile and myTabContent.

<divid="myTabContent"class="tab-content"><divclass="tab-pane fade in active"id="home"><p>Content 1.</p></div><divclass="tab-pane fade"id="profile"><p>Content 2.</p></div></div><hr><divid="myTabContent"class="tab-content"><divclass="tab-pane fade in active"id="home"><p>Content 1.</p></div><divclass="tab-pane fade"id="profile"><p>Content 2.</p></div></div>

and you are giving href="#home" which will target the first element with id.Not all elements with id.

<ulid="myTab"class="nav nav-tabs"><liclass="active"><ahref="#home"data-toggle="tab">C1</a></li><li><ahref="#profile"data-toggle="tab">C2</a></li></ul>

Solution 4:

"data-target" is don't work Bootstrap4.

This is Bootstrap4 version.

<!doctype html><htmllang="ja"><head><!-- Required meta tags --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><title>Hello, world!</title></head><body><ulclass="nav nav-tabs"id="myTab"role="tablist"><liclass="active"><ahref="#home"data-toggle="tab"data-target="#home, #home_else"aria-selected="true"id="home_tab">Home</a></li><li><ahref="#profile"data-toggle="tab"data-target="#profile, #profile_else"aria-selected="false"id="profile_tab">Profile</a></li><li><ahref="#messages"data-toggle="tab"data-target="#messages, #messages_else"aria-selected="false"id="messages_tab">Messages</a></li><li><ahref="#settings"data-toggle="tab"data-target="#settings, #settings_else"aria-selected="false"id="settings_tab">Settings</a></li></ul><divclass="tab-content"><divclass="tab-pane active"id="home"aria-labelledby="home_tab"role="tabpanel">...1</div><divclass="tab-pane"id="profile"aria-labelledby="profile_tab"role="tabpanel">...2</div><divclass="tab-pane"id="messages"aria-labelledby="messages_tab"role="tabpanel">...3</div><divclass="tab-pane"id="settings"aria-labelledby="settings_tab"role="tabpanel">...4</div></div><divclass="tab-content"><divclass="tab-pane active"id="home_else"aria-labelledby="home_tab">...11</div><divclass="tab-pane"id="profile_else"aria-labelledby="profile_tab">...22</div><divclass="tab-pane"id="messages_else"aria-labelledby="messages_tab">...33</div><divclass="tab-pane"id="settings_else"aria-labelledby="settings_tab">...44</div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><scriptsrc="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script><script>
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      var activated_tab = e.target// activated tabvar previous_tab = e.relatedTarget// previous tabif(activated_tab.id === 'home_tab') {
        $('#home_else').css('display', 'block');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'none');
      };
      if(activated_tab.id === 'profile_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'block');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'none');
      }
      if(activated_tab.id === 'messages_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'block');
        $('#settings_else').css('display', 'none');
      }
      if(activated_tab.id === 'settings_tab') {
        $('#home_else').css('display', 'none');
        $('#profile_else').css('display', 'none');
        $('#messages_else').css('display', 'none');
        $('#settings_else').css('display', 'block');
      }
      // 処理,,,,,
    });
  </script></body></html>

Post a Comment for "Control Multiple Tab-contents With One Nav-tabs"