Bootstrap - 帶下拉，激活問題的標籤

我有一個激活我的標籤鏈接的問題，如果您嘗試代碼，您會看到當我點擊「Home」時，它會正確激活，但如果我點擊「菜單1」在此之後，「家庭」仍然會被激活並「菜單1」太多，所以我不能夠點擊「家」的另一次......Bootstrap - 帶下拉，激活問題的標籤

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

來源

2016-05-23 triskheal

好吧，最後我得到了一切！沒有人幫助，我花了時間，但我從中學到：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()); 
})

來源

2016-05-23 14:06:29 triskheal

艱苦努力之後它，我發現了一個簡單的方法來做到這一點：

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

我只是說此行 <input class="form-control" autocomplete="off" type="string" min="1" placeholder="Choose a channel" id="channel">

現在我想知道是否可以在'li'的'h3'標籤中選擇輸入值？類似的東西：

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

我的輸入值將是「菜單2」如果我們點擊列表中的「菜單2」。感謝您的幫助。

來源

2016-05-23 13:29:14 triskheal

Bootstrap - 帶下拉，激活問題的標籤

回答

相關問題