svgファイルにjqueryで動作を付けたい（タブ機能）

Question

前提・実現したいこと

地方別でタップした時にその都度都道府県別で現れるように
タブ切り替えのようにしたい。

<参考>
https://allabout.co.jp/gm/gc/23969/5/

発生している問題・エラーメッセージ

該当のソース

<div id="tabcontrol">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1600 1200" style="enable-background:new 0 0 1600 1200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4D4398;}
.st1{fill:#9DC92A;}
.st2{fill:#00A95F;}
.st3{fill:#E74291;}
.st4{fill:#EA5532;}
.st5{fill:#F18D02;}
.st6{fill:#AF3E92;}
.st7{fill:#00ABEB;}
</style>

<a href="#tabpage1"><path class="st0" d="M1222.4,171.1c0-7.7-6.3-14-14-14h-172c-7.7,0-14,6.3-14,14v107c0,7.7-6.3,14-14,14h-22c-7.7,0-14,6.3-14,14v62
c0,7.7,6.3,14,14,14h72c7.7,0,14-6.3,14-14v-17c0-7.7,6.3-14,14-14h122c7.7,0,14-6.3,14-14V171.1z"/></a>


<a href="#tabpage2"><path class="st1" d="M673.7,913.4c0,7.7-6.3,14-14,14h-162c-7.7,0-14-6.3-14-14v-52c0-7.7,6.3-14,14-14h162c7.7,0,14,6.3,14,14
V913.4z"/></a>

<a href="#tabpage3"><path class="st2" d="M461,1033.4c0,7.7-6.3,14-14,14H325c-7.7,0-14-6.3-14-14v-172c0-7.7,6.3-14,14-14h122c7.7,0,14,6.3,14,14
V1033.4z"/></a>

<a href="#tabpage4"><path class="st3" d="M953.7,607.4c-7.7,0-14,6.3-14,14v40.7c0,7.7-6.3,14-14,14H813c-7.7,0-14,6.3-14,14v120.7c0,7.7,6.3,14,14,14
h112.7c7.7,0,14-6.3,14-14v-52c0-7.7,6.3-14,14-14h52c7.7,0,14-6.3,14-14V621.4c0-7.7-6.3-14-14-14H953.7z"/></a>

<a href="#tabpage5"><path class="st4" d="M610.3,676.1c-7.7,0-14,6.3-14,14v120.7c0,7.7,6.3,14,14,14h72c7.7,0,14,6.3,14,14v52c0,7.7,6.3,14,14,14h52
c7.7,0,14-6.3,14-14v-52c0-7.7,0-20.3,0-28V690.1c0-7.7-6.3-14-14-14H610.3z"/></a>

<a href="#tabpage6"><path class="st5" d="M573.7,810.7c0,7.7-6.3,14-14,14h-152c-7.7,0-14-6.3-14-14V690.1c0-7.7,6.3-14,14-14h152c7.7,0,14,6.3,14,14
V810.7z"/></a>

<a href="#tabpage7"><path class="st6" d="M1056.4,687.4c-7.7,0-14,6.3-14,14v52c0,7.7-6.3,14-14,14h-52c-7.7,0-14,6.3-14,14v52c0,7.7,6.3,14,14,14h52
c7.7,0,20.3,0,28,0h52c7.7,0,14-6.3,14-14v-52c0-7.7,0-20.3,0-28v-52c0-7.7-6.3-14-14-14H1056.4z"/></a>

<a href="#tabpage8"><path class="st7" d="M986.4,404.7c-7.7,0-14,6.3-14,14v152c0,7.7,6.3,14,14,14h42c7.7,0,14,6.3,14,14v52c0,7.7,6.3,14,14,14h52
c7.7,0,14-6.3,14-14v-52c0-7.7,0-20.3,0-28v-152c0-7.7-6.3-14-14-14H986.4z"/></a>
</svg>
</div>

<div id="tabbody">
    <div id="tabpage1">…… タブ1の中身 ……</div>
    <div id="tabpage2">…… タブ2の中身 ……</div>
    <div id="tabpage3">…… タブ3の中身 ……</div>
    <div id="tabpage4">…… タブ4の中身 ……</div>
    <div id="tabpage5">…… タブ5の中身 ……</div>
    <div id="tabpage6">…… タブ6の中身 ……</div>
    <div id="tabpage7">…… タブ7の中身 ……</div>
    <div id="tabpage8">…… タブ8の中身 ……</div>
 </div>

```コード

```javasqript
<script type="text/javascript">
    // ---------------------------
    // ▼A：対象要素を得る
    // ---------------------------
    var tabs = document.getElementById('tabcontrol').getElementsByTagName('a');
    var pages = document.getElementById('tabbody').getElementsByTagName('div');
    
    // ---------------------------
    // ▼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";
       }
       this.style.zIndex = "10";
    
       // ▼B-4. ページ遷移しないようにfalseを返す
       return false;
    }
    
    // ---------------------------
    // ▼C：すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
    // ---------------------------
    for(var i=0; i<tabs.length; i++) {
       tabs[i].onclick = changeTab;
    }
    
    // ---------------------------
    // ▼D：最初は先頭のタブを選択しておく
    // ---------------------------
    tabs[0].onclick();
    
    </script>

試したこと

javascriptが読み込まれているかの確認。https://allabout.co.jp/gm/gc/23969/5/のファイルを読み込んだ際にしっかりタブとして動作しましたが
上記のsvgファイルを張り付けるとタブにならないようになってしまった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

下記に変えて試してもらえますか？

// ▼B-1. href属性値から対象のid名を抜き出す
//var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
var targetid = this.href.baseVal.substring(this.href.baseVal.indexOf('#')+1,this.href.baseVal.length);

Comments

[kaki_kukeko]

完璧に実装が出来ました。

ありがとうございます。