$result = implode(' ', array($data1, $data2));
является более общим.
Попробуйте этот код. Он добавляет вкладку href в url + открывает вкладку на основе хеша при загрузке страницы:
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop() || $('html').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
Я использую Bootstrap 3.3. *, и ни одно из вышеперечисленных решений не помогло мне, даже обозначено как ответ. Я просто добавил ниже сценарий и работал.
$(function(){
var hash = document.location.hash;
if (hash) {
$('.navbar-nav a[href="' + hash + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('click', function (e) {
history.pushState(null, null, $(this).attr('href'));
});
});
Надеюсь, это вам поможет.
Здесь вы можете использовать history.pushState
, чтобы вы могли использовать историю своего браузера, чтобы вернуться к предыдущей вкладке
$(document).ready(function() {
// add a hash to the URL when the user clicks on a tab
$('a[data-toggle="tab"]').on('click', function(e) {
history.pushState(null, null, $(this).attr('href'));
});
// navigate to a tab when the history changes
window.addEventListener("popstate", function(e) {
var activeTab = $('[href=' + location.hash + ']');
if (activeTab.length) {
activeTab.tab('show');
} else {
$('.nav-tabs a:first').tab('show');
}
});
});
Для полного решения есть три компонента:
Я не думаю, что ни один из комментариев здесь, ни принятый ответ, не обрабатывают все эти сценарии.
Так как это немного связано, я думаю, что это самый простой, как небольшой плагин jQuery: https://github.com/aidanlister/jquery-stickytabs
Вы можете вызвать плагин так:
$('.nav-tabs').stickyTabs();
Я сделал запись в блоге для этого, http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/
Существует также простой способ реагировать на изменения хэша (например, кнопка «Назад»). Просто добавьте прослушиватель событий hashchange к решению tomaszbak:
$(function(){
// Change tab on load
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
// Change tab on hashchange
window.addEventListener('hashchange', function() {
var changedHash = window.location.hash;
changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
}, false);
});
Самое простое, если вы используете документированный синтаксис data-toggle="tab"
, описанный здесь здесь :
$(document).on('shown.bs.tab', function(event) {
window.location.hash = $(event.target).attr('href');
});
Благодаря @tomaszbak для оригинального решения, так как мои изменения были отклонены, и я не могу прокомментировать его сообщение, но я оставлю здесь немного улучшенную и более читаемую версию.
Это в основном то же самое, но если исправить проблему совместимости кросс-браузера, которую я имел с его.
$(document).ready(function(){
// go to hash on window load
var hash = window.location.hash;
if (hash) {
$('ul.nav a[href="' + hash + '"]').tab('show');
}
// change hash on click
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
if($('html').scrollTop()){
var scrollmem = $('html').scrollTop(); // get scrollbar position (firefox)
}else{
var scrollmem = $('body').scrollTop(); // get scrollbar position (chrome)
}
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem); // set scrollbar position
});
});
Такая же проблема с CakePHP с вкладками Bootstrap 3, а также при отправке с внешним URL-адресом и привязкой, он переходит в раздел, теряющий мое меню, после обзора многие решения сделали это ...
благодаря: http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs
$(document).ready(function()
{
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
if(location.hash)
{
$('a[href=' + location.hash + ']').tab('show');
}
//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
});
//Actualiza el URL con el anchor o ancla del tab al darle clic
/* Update hash based on tab, basically restores browser default behavior to
fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event)
{
location.hash = this.getAttribute("href");
});
//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */
$(window).on('popstate', function()
{
//Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
//var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
var anchor = location.hash;
$('a[href=' + anchor + ']').tab('show');
});
});//Fin OnReady
Для тех, кто использует Ruby on Rails или любой другой скрипт на стороне сервера, вам нужно будет использовать опцию anchor
для путей. Это связано с тем, что, как только страница загружается, у нее нет хеша URL-адреса.
<%= form_for @foo, url: foo_path(@foo, anchor: dom_id(foo)) do |f| %>
# Or
<%= link_to 'Foo', foo_path(@foo, anchor: dom_id(foo)) %>
Если вы используете префикс, чтобы предотвратить переход из окна в id:
<%= form_for @foo, url: foo_path(@foo, anchor: "bar_#{dom_id(foo)}") do |f| %>
, вы должны указать правильную вкладку. ] Тогда вы CoffeeScript:
hash = document.location.hash
prefix = 'bar_'
$('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab 'show' if hash
$('.nav-tabs a').on 'shown.bs.tab', (e) ->
window.location.hash = e.target.hash.replace '#', '#' + prefix
Или JavaScript:
var hash, prefix;
hash = document.location.hash;
prefix = 'bar_';
if (hash) {
$('.nav-tabs a[href=' + hash.replace(prefix, '') + ']').tab('show');
}
$('.nav-tabs a').on('shown.bs.tab', function(e) {
window.location.hash = e.target.hash.replace('#', '#' + prefix);
});
Это должно работать в Bootstrap 3.
Это также фиксирует крайне неясную вкладку href, не срабатывающую при использовании jquery и bootstrap
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('.nav-tabs a').click(function (e) {
// No e.preventDefault() here.
$(this).tab('show');
});
</script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
Мое решение вашей проблемы:
Сначала добавьте новый атрибут data-value
к каждой ссылке a
, например:
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
</li>
<li>
<a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
</li>
<li>
<a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
</li>
</ul>
Во-вторых, измените идентификаторы вкладок, например от add
до tab-add
, также обновить hrefs, чтобы включить префикс tab-
:
<div class="tab-content">
<div class="tab-pane" id="tab-add">Add panel</div>
<div class="tab-pane" id="tab-edit">Edit panel</div>
<div class="tab-pane" id="tab-delete">Panel panel</div>
</div>
И, наконец, js-код:
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
Здесь jsFiddle - но это не работает из-за iframe, используемого jsFiddle, но вы можете прочитать источник моего решения.
Использование data-toggle="tab"
запрашивает плагин для обработки вкладок, который при этом вызывает preventDefault
в событии ( код на github ).
Вы можете использовать свою собственную активацию вкладок и позволить событию пройти:
$('.nav-tabs a').click(function (e) {
// No e.preventDefault() here
$(this).tab('show');
});
И вы должны удалить атрибут data-toggle="tab"
Проверить документ , если у вас есть сомнения.
Ни одно из вышеперечисленных не работало для меня, так что вот как я получил свою работу:
class="tab-link"
ко всем ссылкам, которые нуждаются в этой функции window.addEventListener ( 'popstate', function( event ) { tab_change(); } ); function tab_change() { var hash = window.location.hash; hash && $( 'ul.nav a[href="' + hash + '"]' ).tab( 'show' ); $( '.tab-link' ).click ( function( e ) { $( this ).tab( 'show' ); var scrollmem = $( 'body' ).scrollTop() || $( 'html' ).scrollTop(); window.location.hash = this.hash; $( 'html,body' ).scrollTop( scrollmem ); $( 'ul.nav-tabs a[href="' + window.location.hash + '"]' ).tab( 'show' ); } ); }
Поскольку ваши якорные элементы уже меняют хеш-адрес, прослушивание события onhashchange - еще один хороший вариант. Как уже упоминал @flori, этот метод хорошо работает с кнопкой назад.
var tabs$ = $(".nav-tabs a");
$( window ).on("hashchange", function() {
var hash = window.location.hash, // get current hash
menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element
menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");
Наконец, запуск события сразу после того, как вы определили слушателя, также поможет отобразить правильную вкладку на загрузке страницы.
scrollTop
, потому что он меняет дизайн, когда я нажимаю на другую вкладку. – Ivanka Todorova 27 August 2012 в 09:54&&
означаетAND
, поэтому, если левая часть этого значения равна true (hash
не равно 0, нулевой или пустой), а справа - true, то что-то делать, однако линия заканчивается на;
, поэтому есть ничего не делать до;
, и не имеет значения, отображается ли вкладка или нет, и не имеет значения, что возвращает.tab('show')
, она все равно попытается. При оценке логики таким образом, если первая часть уравнения (до&&
) ложна, нет необходимости продолжать оценивать, поэтому вкладка не будет отображаться. Вы можете добиться такого же эффекта:if(hash){ $('ul.nav a[href="' + hash + '"]').tab('show'); }
– vahanpwns 5 February 2014 в 00:58a && b;
означает trya
, а затем только если его true, попробуйтеb
. Строки верны, если они не пусты. – vahanpwns 5 February 2014 в 01:06