タブ切り替え
（リストボタンver.）
※デザインにより工数変動あり
| 追加可能パーツ | 変更可能箇所 | 変更NG | 同一ページ に複数設置 |
ページ複製・ クリップボード使用可否 |
|---|---|---|---|---|
|
■タブ
|
|
後から顧客側でタブ数を変更は不可※2 |
〇 | 〇 |
| ※留意事項 | |||
|---|---|---|---|
|
※1：編集画面のリンクリストを使用して増減可能。一段で並ぶタブ数はCSSで変更可◎ ※タブ切り替え（colボタンver.）と比べてコンテンツ内での複雑なレイアウト（2カラム以上〜）は基本できません。 ※SP時はタブ切り替え用のボタンが横スクロールします。 |
フェレットワンで管理されたページのコンテンツ量の上限は、カラムにして大体150カラムが上限です。（個社ごとの扱い方によって変動します）
このタブ切り替えパーツでは、多くの情報をタブに分割・格納するパーツである特徴から、データ量の上限にあたりやすい特性を持ちます。
データ量の上限にあたると、「変更を保存できませんでした」というメッセージが表示されます。
上記のエラーメッセージが表示された場合、パーツや行、カラム数を減らしていただく必要がございますので予めご了承ください。
デモ
- タブメニュー1
- タブメニュー2
- タブメニュー3
- タブメニュー4
タブ切り替え行01
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
機能１の見出し（h3）
タブ切り替え行02
- ○○ができていない
- ○○を改善したい
- ○○に不満を感じている
タブ切り替え行03
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行04
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
デモ02
- タブメニュー1
- タブメニュー2
- タブメニュー3
- タブメニュー4
- タブメニュー5
- タブメニュー6
- タブメニュー7
- タブメニュー8
タブ切り替え行01
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
機能１の見出し（h3）
タブ切り替え行02
- ○○ができていない
- ○○を改善したい
- ○○に不満を感じている
タブ切り替え行03
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行04
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行05
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行06
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行07
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
タブ切り替え行08
サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。サービス概要説明が入ります。
構造図
デモのパーツの構造を説明しています。
設定方法
- CSSをカスタムCSSに記述。
- 編集画面用CSSを適切な位置に記述。
- JavaScriptを使用したいパーツのセクションの一番下に配置。複数ページ設置する場合は共通フッターに配置。
- クラス名を見本とあわせる。
- 新規行（row）を作成し、クラス名「tabNav02_row js-tabNav02_row」の２つを追加。[=タブエリア]
- 上記行（row）内にリンクリストを設置し、クラス「tabNav02_list js-tabNav02_list」を追加。
※リンクは設定しないでください。 - 上記行（row）のすぐ下にタブコンテンツ表示用の行（row）を新規作成し、クラス名「tab02_row js-tab02_row」を追加。
-
上で用意したタブ切り替え用のボタン「js-tabNav02_list」の並び順とタブコンテンツ表示用の行「js-tab02_row」の配置順が連動しているので、タブ切り替え用のボタンの数だけ行（row）を下に順番に追加していってください。
※構造図参照
※デフォルトではSP時タブ部分がスクロールします。（CSSで適宜変更可能）
※タブの横幅はカスタムCSSで適宜調整してください。（デフォルトでは4つ並びになるようにしています）
※JSで表示をコントロールする際に「display:block;」がかかる関係で強制的に縦並びになるため、2カラム以上のレイアウトは不可としています。（留意事項にも記載あり）
- 新CMSの場合：基本デザインパーツ（セクションパーツ、複合パーツ、単体パーツ）を使用して問題ありません。
注意点
- タブ切り替え用の行の間にタブ切り替え以外のパーツを配置しないでください。
- スマホ編集画面機能との併用はできません。
カスタムCSS
CSS内にデフォルトで用意されている、「JSパーツ集記述場所」の中に追加してください。
※アップセル等で見つからない場合は、LP記述欄の下などに入れてください。
2023-07-25更新（v1.0.0）
/*----- タブ切り替え（リストボタンver.） START v1.0.0-----*/
.theme-fo-base .wrapper .contents {
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
// タブ切り替え ボタンエリア
&.tabNav02_row {
& + .tab02_row {
display: block;// １つ目のタブコンテンツだけ初期読み込み時に表示
}
.col {
padding: 0;
.component {
&.list {
&.tabNav02_list {
margin: 0;
ul {
display: flex;
flex-wrap: wrap;
gap: 5px;
@include breakpoint-ssp {
flex-wrap: nowrap;
overflow: auto;//SP時横にスライド
}
&::-webkit-scrollbar {
display: none;//スクロールバー非表示
-ms-overflow-style: none;//Edge対策
scrollbar-width: none;//Firefox対策
}
li {
cursor: pointer;
width: calc((100% - 5px * 3) / 4);
display: block;
background: #fff;
font-weight: bold;
text-align: center;
margin: 0;
padding: 20px;
@include breakpoint-ssp {
min-width: 130px;
font-size: 12px;
padding: 15px 10px;
}
&:hover {
background: #ffc72e;
color: #fff;
}
&.is-active {
background: #ffad2f;
color: #fff;
}
// 5個目以降〜下余白つける
&:nth-child(n + 5) {
@include breakpoint-pc {
margin-bottom: 5px;
}
}
}
}
}
}
}
}
}
// タブ切り替え コンテンツエリア
&.tab02_row {
display: none;// 2個目以降のタブコンテンツ初期読み込み時に非表示
background: #fff;
padding: 30px;
.col {
display: block;
}
}
}
}
}
}
/*----- タブ切り替え（リストボタンver.） END -----*/
編集画面CSS内にデフォルトで用意されている、「//JSパーツの記述はここにお願いします」の中に追加してください。
※アップセル等で見つからない場合は、@include edit-page {}内に必ず入れてください。
2023-07-25更新（v1.0.0）
/*-- タブ切り替え（リストボタンver.） 編集画面用 START v1.0.0--*/
:is(section,section[data-designpart-id]:not(:root:root:root:root)) {
.inner {
.row {
&.tab02_row {
display: block !important;
}
}
}
}
/*-- タブ切り替え（リストボタンver.） 編集画面用 END --*/
①jQueryを設定
JavaScript埋め込みパーツを設置し、CDNで読み込んだ最新バージョンのjQueryを反映させます。
※jQueryコンフリクト回避 のため
複数のJSパーツを使用する場合は、こちらの①jQueryの読み込みは一度だけで大丈夫です。
2024-01更新（v1.0.0）
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script>
'use strict';
/*--- jQueryコンフリクト回避 v1.0.0---*/
jQuery.noConflict();
/*--- この下にJavaScriptを記述していく---*/
</script>
①の下に新規でJavaScript埋め込みパーツを設置し、コピー＆ペーストします。
2022-09-05更新（v1.0.0）
<script>
/* ----------------------------
タブ切り替え（リストボタンver.）v1.0.0
---------------------------- */
jQuery(function () {
/*------------- 変数定義 【変更可能】 START -------------*/
const tabNavRow = jQuery('.js-tabNav02_row');/* タブ切り替えのボタンが入ったrow*/
const tabNavBtn = jQuery('.js-tabNav02_row .js-tabNav02_list li');/* タブ切り替えのボタン */
const tabRow = jQuery('.js-tab02_row');/* 切り替え対象のrow */
/*------------- 変数定義 【変更可能】 END -------------*/
/* タブ切り替えボタンと切り替え対象のrowにそれぞれdata属性を付与（複数タブ切り替えパーツに対応するため） */
for (let i = 0; i < tabNavRow.length; i++) {
/* 1つのタブ切り替えナビセクションの中に含まれるタブ切り替えボタンの数 */
let tabNavButtons = tabNavRow.eq(i).find('.js-tabNav02_list li');
/* 「.finish」がついてないタブ切り替えボタン・rowに属性を付与していく */
let tabRowArray = jQuery('.js-tab02_row:not(.finish)');
for (let m = 0; m < tabNavButtons.length; m++) {
tabNavButtons.eq(m).attr('data-tab-target', `${i + 1}`);
tabNavButtons.eq(m).attr('data-tab-id', `${m + 1}`);
tabRowArray.eq(m).attr('data-tab-target', `${i + 1}`);
/* 処理が終わったタブ切り替えボタン・rowに「.finish」をつける */
tabRowArray.eq(m).addClass('finish');
};
};
tabRow.removeClass('finish');/* 全て処理が終わったら.finishを外す */
/* 各タブ切り替えパーツの１つ目の切り替えボタンとrowを表示し、「.is-active」を付与（初期設定） */
tabNavRow.each(function(index) {
const targetBtn = jQuery(`.js-tabNav02_list li[data-tab-target="${index + 1}"]`);
const targetRow = jQuery(`.js-tab02_row[data-tab-target="${index + 1}"]`);
targetBtn.eq(0).addClass('is-active');
targetRow.eq(0).css('display', 'block');
targetRow.eq(0).addClass('is-active');
});
/* タブ切り替え用のクリックイベント */
tabNavBtn.on('click', function (e) {
let targetNumber = jQuery(this).attr('data-tab-target');/* クリックされたボタンの属性番号を取得 */
const targetRow = jQuery(`.js-tab02_row[data-tab-target="${targetNumber}"]`);/* クリックしたボタンと同じ属性番号が付与されたrow */
const targetBtn = jQuery(`.js-tabNav02_list li[data-tab-target="${targetNumber}"]`);/* クリックしたボタンと同じ属性番号が付与されたボタン */
let targetId = jQuery(this).attr('data-tab-id') - 1;/* 切り替えボタンの属性番号 */
targetRow.css('display', 'none');
targetBtn.removeClass('is-active');
/* クリックしたボタンに「is-active」 を付与 */
jQuery(e.currentTarget).addClass('is-active');
/* クリックしたボタンの対象のrowを表示 */
targetRow.eq(targetId).css('display', 'block');
targetRow.eq(targetId).addClass('is-active');
});
});
/* ----------------------------
タブ切り替え（リストボタンver.） END
---------------------------- */
</script>
© Basic Inc. All Rights Reserved.