Question

我已经使用嵌套的子标签创建了标签。我希望能够从父导航菜单下拉列表导航到子选项卡。我不确定如何做到这一点，而且我所尝试的并不起作用。

<div class="container">
  <h2>Nest tabs with submenus</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
    <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab 1 (menu)
     <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a data-toggle="tab" href="#subtab1">Submenu 1</a></li>
      <li><a data-toggle="tab" href="#subtab2">Submenu 2</a></li>
      <li><a data-toggle="tab" href="#subtab3">Submenu 3</a></li>
     </ul>
    </li>    
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
    </div>
    <div id="tab1" class="tab-pane fade">
      <h3>Tab 1</h3>
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#subtab1">subtab 1</a></li>
        <li><a data-toggle="tab" href="#subtab2">subtab 2</a></li>
        <li><a data-toggle="tab" href="#subtab3">subtab 3</a></li>
      </ul>      
      <div class="tab-content">
        <div id="subtab1" class="tab-pane fade">
          <h3>subtab 1</h3>
          <p>Some content in subtab 1.</p>
        </div>
        <div id="subtab2" class="tab-pane fade">
          <h3>subtab 2</h3>
          <p>Some content in subtab 2.</p>
        </div>
        <div id="subtab3" class="tab-pane fade">
          <h3>subtab 3</h3>
          <p>Some content in subtab 3.</p>
        </div>
      </div>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>tab 2</h3>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h3>tab 3</h3>
      <div id="activate-home-tab" style="color:blue; cursor:pointer;">open home tab</div>
    </div>
  </div>
</div>

fiddle。

Answer 1

要使用 Tab1（菜单）导航子标签，您需要考虑：

每次点击 Tab1（菜单）时，如果尚未打开，则需要打开相关标签
点击 Tab1（菜单）锚点，您需要显示相应的标签

更新的小提琴here

jQuery("#activate-home-tab").click(function(){
    console.log("opening home")
    jQuery('[href="#home"]').tab('show');
});

jQuery('.dropdown').on('click', function(e) {
    if (!jQuery('#tab1').is('.active')) {
        jQuery('[href="#tab1"]').tab('show');
    }
});
jQuery('.dropdown li [href^="#subtab"]').on('click', function(e) {
    var currHref = this.getAttribute('href');
    jQuery('[href="' + currHref + '"]').tab('show');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <h2>Nest tabs with submenus</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
        <li><a data-toggle="tab" href="#tab1">Tab 1</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab 1 (menu)
                <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a data-toggle="tab" href="#subtab1">Submenu 1</a></li>
                <li><a data-toggle="tab" href="#subtab2">Submenu 2</a></li>
                <li><a data-toggle="tab" href="#subtab3">Submenu 3</a></li>
            </ul>
        </li>
        <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
    </ul>

    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>HOME</h3>
        </div>
        <div id="tab1" class="tab-pane fade">
            <h3>Tab 1</h3>
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#subtab1">subtab 1</a></li>
                <li><a data-toggle="tab" href="#subtab2">subtab 2</a></li>
                <li><a data-toggle="tab" href="#subtab3">subtab 3</a></li>
            </ul>
            <div class="tab-content">
                <div id="subtab1" class="tab-pane fade">
                    <h3>subtab 1</h3>
                    <p>Some content in subtab 1.</p>
                </div>
                <div id="subtab2" class="tab-pane fade">
                    <h3>subtab 2</h3>
                    <p>Some content in subtab 2.</p>
                </div>
                <div id="subtab3" class="tab-pane fade">
                    <h3>subtab 3</h3>
                    <p>Some content in subtab 3.</p>
                </div>
            </div>
        </div>
        <div id="tab2" class="tab-pane fade">
            <h3>tab 2</h3>
        </div>
        <div id="tab3" class="tab-pane fade">
            <h3>tab 3</h3>
            <div id="activate-home-tab" style="color:blue; cursor:pointer;">open home tab</div>
        </div>
    </div>
</div>

Bootstrap嵌套选项卡，带有父选项卡的下拉导航

1 个答案: