W końcu mam zakładki Bootstrap do pracy. Zastanawiam się, czy istnieje sposób na zmianę zachowania, więc zamiast klikać, po prostu kursor wskazywałby ukrytą zawartość?Jak zrobić z zakładkami bootstrap twitter na zawisie zamiast kliknięcia?
Odpowiedz
W swoim $(document).ready
lub gdzie indziej ...
umieścić coś takiego:
$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});
przyzwyczajenie się do modyfikowania rdzenia kod bootstrap.
Dodatkowo można to zrobić:
$('.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');
});
które zapewnią wybór aktywowanych po raz pierwszy użytkownik kliknie kartę.
Zmienić bootstrap.js
(lub boostrap-tab.js
jeśli nie używasz pełnego bootstrap.js
pliku)
Gdzie można zobaczyć:
/* TAB DATA-API
* ============ */
$(function() {
$('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Zmiana 'click.tab.data-api'
do 'hover.tab.data-api'
Uwaga: Przetestowałem to z Bootstrap v2.0.2
JavaScript:
w $ (document) .ready lub gdzie indziej ...
umieścić coś takiego:
$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover(function(){
$(this).tab('show');
});
HTML:
<ul class="nav nav-tabs" data-toggle="tab-hover">
....
</ul>
Lepiej wiążą program do obsługi obiektu dokumentu, aby działał z dynamicznie generowanymi kartami:
$(document).on('mouseenter', '[data-toggle="tab"]', function() {
$(this).tab('show');
});
Jest tam również mały plugin Bootstrap który automatycznie aktywuje zaczepy pod kursorem: https://github.com/tonystar/bootstrap-hover-tabs.
Kompletny HTML za pomocą tej wtyczki jest:
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>
Dzięki tym pracuje ja;) –
ładny kod. działa dobrze ... –
- 1. Szyny z zakładkami Bootstrap
- 2. Używanie Twitter Bootstrap iFrame?
- 3. jqGrid na Twitter Bootstrap
- 4. Android - jak zrobić złożoną aplikację z zakładkami z widokami
- 5. Clearfix z twitter bootstrap
- 6. jak zatrzymać obraz reagujący na twitter-bootstrap?
- 7. szyny generują układ bootstrap z bootstrap-sass zamiast twitter-bootstrap-rails
- 8. Jak budować Twitter Bootstrap
- 9. dynamiczny karuzela twitter bootstrap
- 10. Jak zmienić rozmiar poppera na twitter bootstrap?
- 11. Ember.js z Twitter Bootstrap Modal
- 12. Menu rozwijane z Twitter Bootstrap
- 13. Jak ustawić .btn-group z twitter-bootstrap?
- 14. twitter bootstrap - jak pominąć linię?
- 15. Jak zaimplementować twitter bootstrap accordion?
- 16. Jak zmienić kolor png na zawisie?
- 17. Twitter bootstrap split dropdown
- 18. Twitter Bootstrap - Użyj czcionek serif
- 19. Twitter Bootstrap: zagnieżdżone wiersze?
- 20. Wyświetl HTML w @ html.actionlink z Twitter Bootstrap
- 21. Twitter Bootstrap Poziomy formularz
- 22. Twitter-Bootstrap: Treść nakładająca się na stopkę
- 23. Zmiana koloru aktywnego tła karty z zakładkami w bootstrap 3.0
- 24. Twitter Bootstrap Tabs Korzystanie foreach Na OpenCart
- 25. twitter bootstrap domyślne wyściełanie
- 26. Twitter Bootstrap "ciecz-pojemnik"
- 27. Twitter Bootstrap obejmuje przelewał
- 28. karuzela bootstrap twitter znika
- 29. twitter bootstrap autouzupełnianie rozwijane/combobox z Knockoutjs
- 30. Twitter Bootstrap daszka rozmiar
Zobacz również: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap- menu-drop-on-hover-raczej-niż-kliknij –
Pytanie jest [odpowiedział tutaj] [1] za pomocą kilku linii css! [1]: http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click – kolydart