У меня наконец появились вкладки Bootstrap. Мне было интересно, есть ли способ изменить поведение, поэтому вместо того, чтобы просто навести курсор на курсор, будет отображаться скрытый контент?
Как сделать с вкладками twitter bootstrap при наведении курсора вместо нажатия?
Ответ 1
В $(document).ready
или в другом месте...
поставьте что-то вроде этого:
$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});
Вам не придется изменять код начальной загрузки.
Кроме того, вы можете сделать это:
$('.nav-tabs > li ').hover(function() {
if ($(this).hasClass('hoverblock'))
return;
else
$(this).find('a').tab('show');
});
$('.nav-tabs > li').find('a').click(function() {
$(this).parent()
.siblings().addClass('hoverblock');
});
Это предотвратит выбор наведения после первого щелчка пользователем вкладки.
Ответ 2
Лучше привязать обработчик к объекту документа, чтобы он также работал с динамически сгенерированными вкладками:
$(document).on('mouseenter', '[data-toggle="tab"]', function () {
$(this).tab('show');
});
Также есть небольшой плагин Bootstrap, который автоматически активирует вкладки при наведении: https://github.com/tonystar/bootstrap-hover-tabs.
Полный HTML-код с помощью этого плагина:
body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
<li><a href="#tab-4" data-toggle="tab">Tab 4</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content well">
<div class="tab-pane active" id="tab-1">Content 1</div>
<div class="tab-pane" id="tab-2">Content 2</div>
<div class="tab-pane" id="tab-3">Content 3</div>
<div class="tab-pane" id="tab-4">Content 4</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>
Ответ 3
Измените bootstrap.js
(или boostrap-tab.js
, если вы не используете полный файл bootstrap.js
)
Где вы видите:
/* TAB DATA-API
* ============ */
$(function () {
$('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
измените значение 'click.tab.data-api'
на 'hover.tab.data-api'
Примечание. Я тестировал это с помощью Bootstrap v2.0.2
Ответ 4
JavaScript:
В вашем $(документе).ready или в другом месте...
поставьте что-то вроде этого:
$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){
$(this).tab('show');
});
HTML:
<ul class="nav nav-tabs" data-toggle="tab-hover">
....
</ul>