Question

我使用标签内容更改成功创建了一个下拉列表。但问题是，在我选择下拉列表中的值以更改标签内容后 - 让我们说wan_static_ip到wan_dynamic_ip，我无法再次切换回wan_static_ip。

另一个问题是，当选择了该值时，它将被永久选中，不能再次点击

＆＃13;

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

＆＃13;

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>

带选项卡窗格的Bootstrap下拉列表

1 个答案: