Bootstrap - вкладка с раскрывающимся списком, проблемы с активацией

У меня возникла проблема с активацией ссылок на мои ссылки, если вы попробуете код, вы увидите, что, когда я нажимаю «Домой», например, он активируется правильно, но если я нажму «Меню 1» после этого «Home» по-прежнему будет активировать и «Меню 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">

и теперь я хотел бы знать, возможно ли сделать входное значение в теге 'h3' выбранного 'li'? Нечто подобное:

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

Мой вход значение будет «Меню 2», если нажать на кнопку «Меню 2» в списке. Спасибо за помощь.

источник

2016-05-23 13:29:14 triskheal

Bootstrap - вкладка с раскрывающимся списком, проблемы с активацией

ответ

Смежные вопросы