質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

512閲覧

クリックして、2つの要素を同時に変更したい。

veronica

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/30 04:47

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つ同時に変更したいのですが、わかる方ご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/06/30 04:52

あなたが書いたHTMLとJavaScriptコードの 掲載をお願いします。
veronica

2019/06/30 04:58

<section class="container_mainvisual"> <div class="row"> <div class="col-xs-12 mainvisual"> <p class="hokkaido_guide">北海道人気観光8エリア</p> <!-- <div id="green" class="sapporo"><p class="hokkaido_guide">札幌・小樽完全観光ガイド</p></div>--> <div class=area> <img class="mainvisual_img" src="demo/top/hokkaido_map.png"></div> <!-- <div id="areamap" class="api"> <div class="search_query inner"> <form action=""> <section id="search_area" class="query_block"> <div class="block_body"> <div class="area_map"> --> <div class="area_map"> <ul class="pointer_list"> <li> <div class="query_btn map_pointer map_pointer01-01" role="button" onclick="show('sapporo');" /> </li> <li><div class="query_btn map_pointer map_pointer02-01" role="button" onclick="show('');" /></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer03-01" role="button"></a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer04-01" role="button"></a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer05-01" role="button"></a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer06-01" role="button"></a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer07-01" role="button"></a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn map_pointer map_pointer08-01" role="button"></a></li> </ul> </div> <!-- /.area_map --> <div class="area_list"> <ul class="query_list -left"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button"> 札幌・小樽・道央エリア  </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">ニセコ・洞爺湖・登別エリア</a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">旭川・上川・中富良野エリア</a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">  函館・道南エリア   </a></li> </ul> <ul class="query_list -right"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button"> 北見・網走・知床エリア  </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button"> 阿寒・摩周・道東エリア  </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">    帯広・十勝エリア    </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button"> 稚内・利尻・礼文エリア </a></li> </ul> </div><!-- /.area_list --> </div> </div> <div id="sapporo"> <div class="area_list"> <ul class="query_list -left"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">   人気観光スポット    </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">    自然景観・花   </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">     イベント     </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">   スポーツレジャー   </a></li> </ul> <ul class="query_list -right"> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">     交通情報   </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">     温泉・宿   </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">     グルメ   </a></li> <li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button">  お土産・ショッピング</a></li> </ul> </div> </div> </section> <script language="JavaScript" type="text/javascript"> function show(course) { document.getElementById(course).style.visibility = 'visible'; } function hide(course) { document.getElementById(course).style.visibility = 'hidden'; } function showimg1() { document.area1.src = "http://www.uu-hokkaido.jp/img/special/ship/map_south.jpg"; document.getElementById("south").style.display = ""; document.getElementById("center").style.display = "none"; document.getElementById("north").style.display = "none"; document.getElementById("east").style.display = "none"; } function showimg2() { document.area1.src = "http://www.uu-hokkaido.jp/img/special/ship/map_center.jpg"; document.getElementById("center").style.display = ""; document.getElementById("south").style.display = "none"; document.getElementById("north").style.display = "none"; document.getElementById("east").style.display = "none"; } function showimg3() { document.area1.src = "http://www.uu-hokkaido.jp/img/special/ship/map_north.jpg"; document.getElementById("north").style.display = ""; document.getElementById("south").style.display = "none"; document.getElementById("center").style.display = "none"; document.getElementById("east").style.display = "none"; } function showimg4() { document.area1.src = "http://www.uu-hokkaido.jp/img/special/ship/map_east.jpg"; document.getElementById("east").style.display = ""; document.getElementById("south").style.display = "none"; document.getElementById("center").style.display = "none"; document.getElementById("north").style.display = "none"; } </script>
veronica

2019/06/30 04:58

ありがとうございます。 よろしくお願い致します。
guest

回答2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

この件は、下記にて解決致しました。
ご確認いただいた皆様、どうもありがとうございました。

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 = "札幌・小樽完全観光ガイド";
}
}

投稿2019/06/30 12:06

veronica

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問