デファクトスタンダードなCSSフレームワーク。 2021年5月5日に現在のBootstrap5がリリースされました:タグ「Bootstrap」での検索

bootstrapのタブをcookieに記憶させる。URLの #tab1 などでタブを切り替える。

● bootstrapのタブをcookieに記憶させる

bootstrapのタブはそのページをリロードしたり次のページに行って戻ってきたりするとデフォルトの状態に戻されています。
次のようにしてそこでクッキーに保存してタグの状態を記憶させるようにします。

ファイル bootstrap_save_tab.js を次のような内容で保存する

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});

bootstrap.min.js , jquery.cookie.min.js とともに読み込ませます

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="./bootstrap_save_tab.js"></script>

以上です。 これだけでbootstrapを使ったページのタブを自動的に記憶してくれるようになります。

● URLの最後の #tab1 などでタブを切り替える

URLの最後の #tab1 などでタブを切り替えるには 次のようにします

html

<ul class="nav nav-tabs">
	<li ><a id="id_tab1" href="#tab1primary" data-toggle="tab">タブ1</a></li>
	<li><a id="id_tab2" href="#tab2primary" data-toggle="tab">タブ2</a></li>
	<li><a id="id_tab3" href="#tab3primary" data-toggle="tab">タブ3</a></li>
	<li><a id="id_tab4" href="#tab4primary" data-toggle="tab">タブ4</a></li>
</ul>

javascript

$(function(){
	if (location.hash == '#tab1'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab1primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab2'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab2primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab3'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab3primary"]').tab('show');
		}, 500 );
	} else if (location.hash == '#tab4'){
		setTimeout( function() {
			$('.nav-tabs a[href="#tab4primary"]').tab('show');
		}, 500 );
	}
});
No.1144
11/14 11:22

edit

Cookie
Bootstrap

Bootstrap4のメディアクエリ

Bootstrap4を使用しているサイトでメディアクエリを追加する場合の記述は以下のようになります。

Bootstrapではデフォルトで次のように画面サイズが決められています

識別子 画面サイズ デバイス
xs 575px以下 モバイル(縦向き)
sm 576px 〜 767px モバイル(横向き)
md 768px 〜 991px タブレット
lg 992px 〜 1199px PC
xl 1200px 以上 PC(大画面)

cssのメディアクエリは次のように記述します。

@media (max-width: 575.98px) {
	.my-class {
		// cssプロパティをここに記述
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.my-class {
		// cssプロパティをここに記述
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}

@media (min-width: 1200px) {
	.my-class {
		// cssプロパティをここに記述
	}	
}
No.990
11/14 11:22

edit

Bootstrap