JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navigation">
    <ul>
    <li class="cate_01"><a href="#c01">#c01</a></li>
    <li class="cate_02"><a href="#c02">#c02</a></li>
    <li class="cate_03"><a href="#c03">#c03</a></li>
    <li class="cate_04"><a href="#c04">#c04</a></li>
    <li class="cate_05"><a href="#c05">#c05</a></li>
    <li class="cate_06"><a href="#c06">#c06</a></li>
    </ul><ul>
    <li class="cate_07"><a href="#c07">#07</a></li>
    <li class="cate_08"><a href="#c08">#08</a></li>
    <li class="cate_09"><a href="#c09">#09</a></li>
    <li class="cate_10"><a href="#c10">#10</a></li>
    <li class="cate_11"><a href="#c11">#11</a></li>
    <li class="cate_12"><a href="#c12">#12</a></li>
    </ul><ul>
    <li class="cate_13"><a href="#c13">#13</a></li>
    <li class="cate_14"><a href="#c14">#14</a></li>
    <li class="cate_15"><a href="#c15">#15</a></li>
    <li class="cate_16"><a href="#c16">#16</a></li>
    <li class="cate_17"><a href="#c17">#17</a></li>
    <li class="cate_18"><a href="#c18">#18</a></li>
    </ul>
</nav>

<div id="c01" class="cateBody">
<h1>コンテンツ(#c01)タイトル</h1>
<ul>
 <li>
  <div id="c01-i1" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i1 .itemWrap -->
 </li>
 <li>
  <div id="c01-i2" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i2 .itemWrap -->
 </li>
 <li>
  <div id="c01-i3" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i3 .itemWrap -->
 </li>
</ul>
<h2>その他タブのアイテム2種</h2>
<ul class="otherLink">
 <li>
  <a href="#c04-i18"><img><p>テキスト</p></a>
 </li>
 <li>
  <a href="#c17-i50"><img><p>テキスト</p></a>
 </li>
</ul>
</div><!-- #c01 .cateBody -->

<div id="c02" class="cateBody">
<h1>コンテンツ(#c02)タイトル</h1>
<ul>
 <li>
  <div id="c02-i4" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i4 .itemWrap -->
 </li>
 <li>
  <div id="c02-i5" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i5 .itemWrap -->
 </li>
 <li>
  <div id="c02-i6" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i6 .itemWrap -->
...

CSS

.cateBody{display:none;}
.cateBody h2{margin-top:200px;}

JavaScript

$(".navigation li a").on("click", function() {
  $(".cateBody").hide();
  $($(this).attr("href")).fadeToggle();
  $(this).toggleClass("active");
});
$('.otherLink li a').on('click',function(e){
  var target = e.currentTarget.hash.split('-')[0];
  $(target).show();
  $(".cateBody:not("+target+")").hide();
  return true;
});