質問: こちらのサイトのメインビジュアルの北海道の地図の丸いピンクをクリックすると、 地図の周りの左右8個の要素が変化します。 例: 札幌〇クリック ⇒函館〇クリック ⇒人気観光スポット(左一番上)クリック ⇒札幌の人気観光スポットのURLになってしまいます。(函館の人気観光スポットのURLへ飛びたいです。) 例えば、まず札幌の丸をクリックし、そのあと函館の丸をクリックしても、 地図の周りの左右8個の要素が変化しません。 函館を一番初めにクリックすると、ちゃんと地図の周りの左右8個の要素が函館のURLになってくれるのですが、 2回目にクリックすると、地図の周りの左右8個の要素が1回目のままで変わってくれません。 地図の周りの左右8個の要素が、クリックされるたびに、クリックした地域に変更するには、どのようにすればよいでしょうか? お分かりになる方いらっしゃいましたら、ご教授よろしくお願います。
回答: 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"; } ```