带有选项卡窗格的 Bootstrap 下拉菜单

Question

我通过选项卡内容更改成功创建了一个下拉列表。 但问题是，在我选择下拉列表中的值来更改选项卡内容后 - 假设从wan_static_ip到wan_dynamic_ip ，我无法再次切换回wan_static_ip 。

另一个问题是，当该值被选中时，它将永久选中并且无法再次单击

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="borders col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a href="#wan_static_ip" data-toggle="tab">Static IP</a> </li> <li role="presentation"><a href="#wan_dynamic_ip" data-toggle="tab">Dynamic IP</a> </li> <li role="presentation"><a href="#wan_pppoe" data-toggle="tab">PPPoE</a> </li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade in active" id="wan_static_ip">1</div> <div class="tab-pane fade" id="wan_dynamic_ip">2</div> <div class="tab-pane fade" id="wan_pppoe">3</div> </div> </div>

Answer 1

我遇到了同样的问题并找到了解决方案。 问题的原因是下拉列表中的引导选择器无法正常工作。 要解决这个问题，您必须根据您选择的类的名称更改和使用此 jQuery 代码。

 jQuery(".dropdown-item").on("click", function() { jQuery(this).attr("aria-selected", "true"); jQuery(this).addClass("active"); jQuery(".dropdown-item").not(this).attr("aria-selected", "false"); jQuery(".dropdown-item").not(this).removeClass("active"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <ul class="nav nav-tabs mb-3" id="standort" role="tablist"> <li class="nav-item dropdown" role="presentation"> <a id="dropName" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Select</a> <ul class="dropdown-menu"> <li class="nav-item drop-item"> <button class="dropdown-item nav-link active" id="tab-1" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="true"> Item 1 </button> </li> <li class="nav-item drop-item"> <button class="dropdown-item nav-link" id="tab-2" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false"> Item 2 </button> </li> </ul> </li> </ul> <div class="tab-content" id="content"> <div class="row tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1"> <H1>This Is Content Of Item 1 </H1> </div> <div class="row tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2"> <H1>This Is Content Of Item 2 </H1> </div> </div> </div>

Answer 2

getbootstrap.com的选项卡下拉按钮的示例代码

<ul class="nav nav-tabs">
    <li class="dropdown" role="presentation">
        <a aria-expanded="false" role="button" href="#" data-toggle="dropdown" class="dropdown-toggle">
              Dropdown <span class="caret"></span>
        </a>
        <ul role="menu" class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>