.className.replace() で、class名を置換します。クリックイベントと併せて使うと、色々できる便利な関数です。
.className.replace()
.className.replace() は、指定したclass名を任意のものに置換する関数で、.classList.replace('置き換える古いクラス名', '置き換えたい新しいクラス名')という形式で使用します。
この関数で、CSSの見た目を変更させるのによく使います。
.className.replace()の使い方
.className.replace()は、class名を置換します。
例えば、以下のようなHTMLがあったとします。
<div id="idTarget" class="classname1">クラス名の置換</div>上記のHTMLのclass名「classname1」を「classname2」に置換するには、JavaScriptでは以下のように記述します。
const target = document.getElementById('idTarget');
target.classList.replace('classname1', 'classname2');すると以下のように、「classname2」に置換されます。
<div id="idTarget" class="classname2">クラス名の置換</div>.className.replace()を使ったタブのサンプル
それでは、.className.replace() を使ってタブを見てみましょう。以下が、JavaScriptを使ったタブのサンプルです。
Section1
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな
上部にあるsectionを選択すると、それぞれに連動したコンテンツが表示されます。
タブのサンプルコード
タブのコードについて見ていきましょう。
まずはHTMLですが、「javaTab」の中には切り替えのスイッチ部分を記述して、「container section」の中にタブの切り替えで表示されるブロックを記述します。
<div class="javaTab">
<div class="javaTabInner">
<div class="javaContainer">
<ul>
<li class="tab is-active" onclick="openTab(event,'Section1')"><a>Section1</a></li>
<li class="tab" onclick="openTab(event,'Section2')"><a>Section2</a></li>
<li class="tab" onclick="openTab(event,'Section3')"><a>Section3</a></li>
</ul>
</div>
</div>
</div>
<!-- タブの中身 -->
<div class="container section">
<div id="Section1" class="content-tab" >
<p>Section1<br>
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p>
</div>
<div id="Section2" class="content-tab" style="display:none">
<p>Section2<br>
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p>
</div>
<div id="Section3" class="content-tab" style="display:none">
<p>Section3<br>
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。山路を登りな</p>
</div>
</div>
<!-- タブの中身 -->この時、HTMLのonclick属性を使ってクリックしたときに、どのような処理を行うかを設定します。
HTMLは切り替えスイッチ。表示されるコンテンツ部分が入れ子構造ではなく、明確に別れている構造です。
次にJavaScriptですが、openTab の関数宣言をして、その中に条件などを定義していきます。
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("content-tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" is-active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " is-active";
}実際には、for文の繰り返し処理の中で「content-tab」を display:none; にして、「tab」に「is-active」のclassを付与してタブを表現しています。
CSS
.className.replace() でclass名を置換した後、見た目やデザインについてはCSSで整えましょう。
以下は、この記事のサンプルでご紹介したタブのCSSです。カスタマイズするなりして使ってみてください。
/* javaTabs */
.javaContainer ul {
list-style: none;
padding: 0;
margin: 0 0 1rem;
border: none;
display: flex;
justify-content: space-between;
box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.javaContainer ul li {
width: calc(100%/3);
text-align: center;
transition: all 0.2s ease;
padding: 0;
}
.javaContainer ul li:first-child a {
border-radius: 3px 0 0 3px;
border-right: solid 1px #eee;
}
.javaContainer ul li:last-child a{
border-radius: 0 3px 3px 0;
border-left: solid 1px #eee;
}
.javaContainer ul li a {
width: 100%;
display: block;
line-height: 50px;
text-decoration: none;
background: #FFF;
}
li.tab.is-active a {
background: linear-gradient(45deg, #bdb9ff, #67b8ff);
color: #FFF;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
}
}
.content-tab {
animation: fadeIn 0.7s ease 0s 1 normal;
}
.content-tab p {
margin:0;
}さいごに
タブUIは、以下の記事のようにHTMLとCSSだけでできてしまいます。
SANGOのテーマに合いそうなタブ切り替えボタンのデザイン3種
ですがその場合、HTMLとCSSの記述量が多くなってしまうので、JavaScriptも併用することで記述量をコンパクトにまとめることができるので覚えておくと便利です。
HTMLとCSSでできたタブに比べ、記述量は半分程度で済む感覚です。また、HTMLの可読性も良くなるので、是非使いこなしてみてください。
