Wordpressで地図上のポイントをクリックしたらタグも連動して変わるやり方

ElementorでHP制作をしております。
下のサイトのように地図上の国をクリックしたらそれに合わせてタグも連動して変わるやり方をわかる方いれば教えてください。
３日間探しても全く見当たらず、困っております。。。


参考サイトでも構いません。。。


https://www.santouka.co.jp/shop-foreign#tab1

質問者からの補足コメント

• こんばんは！
  タブでした、失礼しました。。。
  
  丁寧なアンサーありがとうございます！
  なるほど。。実は私Elementorを使っておりまして、コードがよくわからないんですね。。すみません。
  可能であれば、Elementorのホットスポットを使って、タグと連携をしたいと考えておりますが、なかなか調べても分からず。。。
  
  下記のYoutubeではアコーディオンと連携はできているのですが、タブのやり方はまたコードが違うので出来ませんでした、、
  
  
  
  
  【コード】
  https://element.how/elementor-hotspot-click-open …

  No.1の回答に寄せられた補足コメントです。 補足日時：2023/05/17 02:25

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/05/16 02:31

こんばんは

＞クリックしたらそれに合わせてタグも連動して変わる～
「タグ」ではなく「タブ」ですよね？
「HTMLのタグを書き換えたい」のであれば、スクリプトを利用するしかありません。
タブの切り替えであれば、他の方法も考えられないこともないです。

図形の部分をクリックした範囲によって対応を変える代表的なものに、クリッカブルマップと言われるものがあります。
https://developer.mozilla.org/ja/docs/Web/HTML/E …
ページ内リンクを利用して、CSSのtarget疑似クラスで切り替えることも可能でしょう。

一方で、地図のような複雑な範囲を指定するのはかなり面倒なので、図形そのものをSVGにしてしまうことも多いと思います。
（あるいは、clipで地図画像からSVGの指定範囲を切り取るなど）
https://sakuragraphica.jp/web_construction/web_h …

よく使われる日本地図のようなものであれば、わざわざ自作しなくともSVGデータが配布されていたりもします。
https://geolonia.github.io/japanese-prefectures/ …


ご質問の内容とは直接関係はありませんけれど、ご質問の機能とは別に、タブ単独での切り替え機能も実装していると想像しますので、そちらと両立するように設定する必要があるのではないかと思います。
タブ本体の切り替えをどのような仕組みで行っているのか不明ですが、勝手な想像では、両方向で連動させるのならスクリプトで実装してしまうのが簡単なのではと思います。