带有选项卡窗格的引导下拉列表

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

来自 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>

Answer 2

我遇到了同样的问题并找到了解决方案。 问题的原因是下拉菜单中的引导选择器无法正常工作。 要解决这个问题，你必须根据你选择的类的名称来更改和使用这个 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 3

嗯我也遇到同样的事情。 我编写了下面的代码，因为出于某种原因，

a

标签是添加了

active

类的标签。

$(document).on('click', '.dropdown-item',function() {
            $('.dropdown-item a[data-toggle="tab"]').not(this).removeClass("active");
        });