Twitter Bootstrap とその「タブ」を使用しています。
次のコードがあります。
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#add">add</a></li>
<li><a data-toggle="tab" href="#edit" >edit</a></li>
<li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>
タブは正常に機能しますが、URL に #add、#edit、#delete が追加されていません。
URL の変更を削除するとdata-toggle、タブが機能しません。
これに対する解決策はありますか？
このコードを試してください。タブの 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);
});
});
完全なソリューションには、次の 3 つのコンポーネントが必要です。
ここのコメントも、受け入れられた回答も、これらすべてのシナリオを処理しているとは思いません。
かなりの部分が含まれているため、小さな jQuery プラグインとして最も優れていると思います: https://github.com/aidanlister/jquery-stickytabs
次のようにプラグインを呼び出すことができます。
$('.nav-tabs').stickyTabs();
これについてブログ投稿を作成しましたhttp://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/
を使用すると、プラグインにタブを処理するようにdata-toggle="tab" 要求preventDefaultします。これを実行している間、イベントを呼び出します（githubのコード）。
独自のタブアクティベーションを使用して、イベントを通過させることができます：
$('.nav-tabs a').click(function (e) {
// No e.preventDefault() here
$(this).tab('show');
});
そして、あなたは属性を削除する必要がありますdata-toggle="tab"
疑問がある場合は、ドキュメントを確認してください。
あなたの問題に対する私の解決策：
最初に、次のように各リンクに新しい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>
次に、タブの ID を から に変更addしtab-add、href を更新して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がありますが、jsFiddle で使用される iframe が原因で機能しませんが、私のソリューションのソースを読むことができます。
ハッシュの変更に対応する簡単な方法もあります (例: [戻る] ボタン)。tomaszbak ソリューションに hashchange イベント リスナーを追加するだけです。
$(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);
});
Bootstrap 3.3.* を使用していますが、回答 1 としてマークされていても、上記の解決策は役に立ちませんでした。以下のスクリプトを追加して作業しました。
$(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'));
});
});
これがお役に立てば幸いです。
上記のどれも私にとってはうまくいきませんでした。
class="tab-link"この機能を必要とするすべてのリンクに追加 window.addEventListener
(
'ポップステート',
関数（イベント）
{
tab_change();
}
);
関数 tab_change()
{
var ハッシュ = window.location.hash;
ハッシュ && $( 'ul.nav a[href="' + ハッシュ + '"]' ).tab( 'show' );
$( '.tab-link' ).click
(
関数 ( e )
{
$( この ).tab( '表示' );
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' );
}
);
}
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 で動作するはずです。
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');
}
});
});
元の解決策を提供してくれた@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
});
});
これにより、jquery とブートストラップの使用時に a href が起動しない、非常にわかりにくいタブも修正されます。
<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>