日: 2022年3月14日

<!-- タブメニュー -->
<p id="tabcontrol">
 <a href="#tabpage1" class="no_scroll">サーバー</a>
   <a href="#tabpage2" class="no_scroll">保守サイト</a>
      
   <a href="#tabpage3" class="no_scroll">終了サイト</a>
      <a href="#tabpage4" class="no_scroll">メモ</a>
</p>
<!---->

<!-- タブ囲み-->
<div id="tabbody">
     
     <!-- タブ１-->
     <div id="tabpage1" class="tab_con">
         
<div class="d_con_all" ><div class="d_con_width" >           
    
    
    <h2 class="h2_class">サーバー・ドメイン・バックアップスケジュール</h2>

内容
   </div></div> 
</div>
<!--      タブ１　end -->
    
         
              <!-- タブ2-->
     <div id="tabpage2"  class="tab_con">
         
<div class="d_con_all " ><div class="d_con_width" >  
    
<h2 class="h2_class">保守サイト</h2>

内容
   </div></div> 
</div>
<!--      タブ2　end -->

.con_box1{font-size: 15px;}

#tabcontrol a {
   display: inline-block;            /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
   border-style: solid;              /* 枠線の種類：実線 */
   border-color: black;              /* 枠線の色：黒色 */
   border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
   padding: 0.75em 1em;              /* 内側の余白 */
   text-decoration: none;            /* リンクの下線を消す */
   color: black;                     /* 文字色：黒色 */
   background-color: white;          /* 背景色：白色 */
   font-weight: bold;                /* 太字 */
   position: relative;               /* JavaScriptでz-indexを調整するために必要 */
    
}
/* ▼タブにマウスポインタが載った際(任意) */
#tabcontrol a:hover {
   text-decoration: underline;       /* 文字に下線を引く */
}


/* ▼タブの中身 */
#tabbody {
   border-top: 1px solid black; /* 枠線：黒色の実線を1pxの太さで引く */
   margin-top: -1px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
   padding: 1em;            /* 内側の余白量 */
   background-color: white; /* 背景色：白色 */
   position: relative;      /* z-indexを調整するために必要 */
   z-index: 0;              /* 重なり順序を「最も背面」にするため */
}

/* ▼タブの配色 */
#tabcontrol a:nth-child(1), #tabbody #tabpage1 { background-color: #ffffdd; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), #tabbody #tabpage2 { background-color: #ddffdd; }/* 2つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(3), #tabbody #tabpage3 { background-color: #f9f9f9; }/* 3つ目のタブとその中身用の配色 */

htmlよりあと

<script type="text/javascript">
// ---------------------------
// ▼A：対象要素を得る
// ---------------------------
var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
var pages = document.getElementById('tabbody').getElementsByClassName('tab_con');

// ---------------------------
// ▼B：タブの切り替え処理
// ---------------------------
function changeTab() {
   // ▼B-1. href属性値から対象のid名を抜き出す
   var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);

   // ▼B-2. 指定のタブページだけを表示する
   for(var i=0; i<pages.length; i++) {
      if( pages[i].id != targetid ) {
         pages[i].style.display = "none";
      }
      else {
         pages[i].style.display = "block";
      }
   }

   // ▼B-3. クリックされたタブを前面に表示する
   for(var i=0; i<tabs.length; i++) {
      tabs[i].style.zIndex = "0";
       tabs[i].classList.remove('tab_active');　//追記　クラスを取る
   }
   this.style.zIndex = "10";
    this.classList.add('tab_active');　//追記　クラスを追加

   // ▼B-4. ページ遷移しないようにfalseを返す
   return false;
}

// ---------------------------
// ▼C：すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
// ---------------------------
for(var i=0; i<tabs.length; i++) {
   tabs[i].onclick = changeTab;
}

// ---------------------------
// ▼D：最初は先頭のタブを選択しておく
// ---------------------------
tabs[0].onclick();

</script>

もしくは

<?php include(get_template_directory() . "/8_page_0_page/tab_script.php"); ?>

 

参考

https://allabout.co.jp/gm/gc/23969/4/