Question

我有一个使用Bootstrap 3的应用程序。我需要创建一个使用下拉列表进行导航的页面。我希望它的行为类似于标签。换句话说，当用户在下拉列表中选择一个项目时，我希望在选项卡下面更改内容。我希望标题（订单信息）和下拉列表始终可见，并且下面的内容要更改。换句话说：

Order Info         +-----------------+
                   | [icon] View 1 v |
                   +-----------------+
                   |     [icon] V2   |
                   |     [icon] V3   |
                   |     [icon] V4   | 
                   +-----------------+
[Content here changes]

当内容更改时，所选标签名称应为下拉列表中选定的标签名称。目前，我的代码如下所示：

<div class="row">
    <div class="col-lg-12">
        <h2>Order Info</h2>
        <div class="dropdown pull-right">
            <button class="btn btn-default dropdown-toggle" type="button" id="viewDropDown" aria-expanded="true">
                View Name
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">View 2</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">View 3</a></li>
            </ul>
        </div>

        <hr />
        <br />
    </div>
</div>

<div class="row">
  <div class="col-lg-12">
    [Tab Content Goes Here]
  </div>
</div>

我错过了什么？

Answer 1

如果你看到我隐藏了实际的标签链接#myTab并使用下拉列表来触发使用JS的标签链接。我在下拉列表中为每个链接设置了data-target，例如：data-target="#home"并使用此数据属性来触发标签链接。希望这是你想要的。

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2>Order Info</h2>    
            <div class="dropdown">
                <a id="drop5" href="#" class="btn btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
                  My Account
                  <span class="caret"></span>
                </a>
                <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
                   <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#" data-target="#home">Home</a></li>
                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-target="#profile">Profile</a></li>
                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-target="#messages">Messages</a></li>
                   <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-target="#settings">Settings</a></li>
                </ul>
             </div>

        </div><hr />
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div role="tabpanel">
                <!-- hide the below links-->
                <ul class="nav nav-tabs" style="display:none;" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="home">
                        <h4>Home</h4>...
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="profile"> 
                        <h4>Profile</h4>...
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="messages"> 
                        <h4>Messages</h4...
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="settings"> 
                        <h4>Settings</h4>...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS：在这里，我们将click事件绑定到下拉列表的锚点链接并触发选项卡。

$('#menu2 li a').on('click', function(){
    var $this = $(this);             
    var parent = $this.closest('li');
    var target = $this.data('target');          // #home, #profile, #messages, #settings

    var btn = $this.closest('.dropdown').find('.btn.dropdown-toggle');  // the button element 
    var str = $this.text() + " <span class='caret'></span>";  // get text of the element clicked

    parent.siblings().removeClass('active');      // removing active class if present 
    parent.addClass('active');                    // adding class active to current element

    btn.html(str);                                // setting button text
    $('#myTab a[href="'+target+'"]').tab('show'); // on basis of data-target trigger the tab link
});

Demo Fiddle

在Bootstrap中使用Drop Down For Nav

1 个答案: