0

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

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

・地図の左右にある8つの要素の変更。(これはできました。)
・北海道人気観光8エリアの文字を変更(これも変更したいです。)

をしたいです。

札幌の上のピンクの丸に、
onclick="show('sapporo')を入れて、

上記2つにclass="sapporo"にすると、
1つしか変更されませんでした。

試しに
・地図の左右にある8つの要素 class="sapporo"
・北海道人気観光8エリアの文字 class="sapporo2" と分けて、

札幌の上のピンクの丸に、
onclick="show('sapporo','sapporo2')などいれると無効になりました。

札幌の上のピンクの丸をクリックすると、

・地図の左右にある8つの要素の変更。(これはできました。)
・北海道人気観光8エリアの文字を変更(これも変更したいです。)

これを2つ同時に変更したいのですが、わかる方ご教授お願い致します。

4
  • 「北海道人気観光8エリアの文字」とは、ページ上のどの要素のことを指していますか?また、「北海道人気観光8エリア」の文字を具体的にどのように変更したいのですか?
    – supa
    Commented 2019年6月30日 11:39
  • supaさま、いつもありがとうございます。「北海道人気観光8エリア」の文字は、メインビジュアルの北海道の地図の上になります。       地図上の札幌エリア(ピンクの丸)をクリックすると、「北海道人気観光8エリア」が「札幌・小樽完全観光ガイド」に代わるようにしたいです。よろしくお願い致します。
    – Veronica
    Commented 2019年6月30日 11:41
  • 1
    マルチポストされているようなので、情報共有の為、リンクしておきます。 teratail.com/questions/197853 teratailにはマルチポストした際の注意書きがあるようですので、ご覧になってはいかがでしょうか。 teratail.com/help#posted-otherservice
    – think49
    Commented 2019年6月30日 12:02
  • think49 さま、わざわざ、ご教授頂き、ありがとうございます。確認してみます。
    – Veronica
    Commented 2019年6月30日 12:04

1 件の回答 1

2

show 関数にはどの要素を表示したいのかが引数として渡されるため、その値が札幌だった場合にのみ見出しのテキスト内容を textContent プロパティを用いて変更すれば良いと思います。

function show(course) {
  document
    .querySelectorAll(".container_mainvisual > div[id]")
    .forEach(e => (e.style.visibility = "hidden"));
  document.getElementById(course).style.visibility = "visible";

  if (course === "sapporo") {
    document.querySelector(".hokkaido_guide").textContent = "札幌・小樽完全観光ガイド";
  }
}
1
  • supaさま、いつも本当にありがとうございます。おかげ様で出来ました。感謝致します。
    – Veronica
    Commented 2019年6月30日 12:03

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

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