0

http://uu-hokkaido.cedars.jp/renewal.shtml

こちらのサイトのメインビジュアルの北海道の地図の丸いピンクをクリックすると、

地図の周りの左右8個の要素が変化します。

例:

札幌〇クリック
⇒函館〇クリック
⇒人気観光スポット(左一番上)クリック
⇒札幌の人気観光スポットのURLになってしまいます。(函館の人気観光スポットのURLへ飛びたいです。)

例えば、まず札幌の丸をクリックし、そのあと函館の丸をクリックしても、

地図の周りの左右8個の要素が変化しません。

函館を一番初めにクリックすると、ちゃんと地図の周りの左右8個の要素が函館のURLになってくれるのですが、
2回目にクリックすると、地図の周りの左右8個の要素が1回目のままで変わってくれません。

地図の周りの左右8個の要素が、クリックされるたびに、クリックした地域に変更するには、どのようにすればよいでしょうか?

お分かりになる方いらっしゃいましたら、ご教授よろしくお願います。

1

1 件の回答 1

1

8 個の要素が奇妙な動作をする原因は、一度 visibility プロパティの値が一度 visible になった要素は、フォーカスが外れた状態でも visible のままであるためです。これを解決するためには、「北海道の地図の丸いピンク」をクリックしたときに「それ以外のピンクの項目をクリックしたときに出現する左右 8 個の要素」を非表示に戻さなければなりません。

これは恐らく、質問文ページ内に含まれている show 関数を以下のように修正することで、この問題は解決すると思います。

function show(course) {
  document
    .querySelectorAll(".container_mainvisual > div[id]")
    .forEach(e => (e.style.visibility = "hidden"));
  document.getElementById(course).style.visibility = "visible";
}
1
  • supaさま 今回もご教授頂き、どうもありがとうございます。無事解決できました。感謝致します。
    – Veronica
    Commented 2019年6月30日 10:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。