Question

我的标签链接激活时出现问题，如果您尝试使用该代码，我会在点击“＃34; Home＆＃34;例如，它正确激活，但如果我点击＆＃34;菜单1＆＃34;在此之后，＆＃34; Home＆＃34;仍将被激活和＆＃34;菜单1＆＃34;所以我也无法点击＆＃34; home＆＃34;另一次......

<div class="container dropdown">
  <h2>Dynamic Tabs</h2>
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Click to choose a channel<span class="caret"></span></a>
  <ul class="dropdown-menu nav">
    <li><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

Answer 1

经过努力，我找到了一个简单的方法：

$('.dropdown-menu li').click(function () {
    $('li').removeClass('active');
})

我刚添加了这一行 <input class="form-control" autocomplete="off" type="string" min="1" placeholder="Choose a channel" id="channel">

现在我想知道是否可以在＆＃39; h3＆＃39; ＆＃39; li＆＃39;的标签选中？这样的事情：

$('input').val(this.val());

我的输入值为＆＃34;菜单2＆＃34;如果我们点击＆＃34;菜单2＆＃34;在名单上。谢谢你的帮助。

Answer 2

好吧最后我得到了一切！没有人帮忙，我花了很多时间，但我从中得知：P我会发布它以防万一有人需要答案：

$('input').val($(this).children().html());

所以最终的代码是：

<div class="container dropdown">
  <h2>Dynamic Tabs</h2>
  <input autocomplete="off" class="form-control" autocomplete="off" type="string" min="1" placeholder="Choose a channel" id="channel">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Click to chose a menu<span class="caret"></span></a>
  <ul class="dropdown-menu nav">
    <li><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

添加<script>：

$('.dropdown-menu li').click(function () {
    $('li').removeClass('active');
    $('input').val($(this).children().html());
})

Bootstrap - 带下拉列表，激活问题的选项卡

2 个答案: