- ベストアンサー
静的HTMLで文字の背景色変更と切り替えを行う方法
- 楽天トラベルさんのサイトを参考に、静的HTMLで文字の背景色変更と切り替えを行いたいです。
- リンクをクリックすると背景色が変わり、他のリンクをクリックすると前にクリックしたリンクの背景色は元に戻ります。
- JavaScriptは使用しないようで、<a>タグではなく<span>タグを使っているので、方法がわかりません。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- Aタグを文字ではなくタグとして認識させたい…
http://okweb.jp/kotaeru.php3?q=1422320でリンクをクリックすると押せなくなる処理を作りました。 しかし新たな問題が… 以下はソースです。 function linkcontrol(linkno) { switch(linkno){ case 1: slink1.innerText ='LINK1'; slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>'; slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>'; break; case 2: slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>'; slink2.innerText ='LINK2'; slink3.innerText ='<a href="javascript:linkcontrol(3)">LINK3</a>'; break; case 3: slink1.innerText ='<a href="javascript:linkcontrol(1)">LINK1</a>'; slink2.innerText ='<a href="javascript:linkcontrol(2)">LINK2</a>'; slink3.innerText ='LINK3'; break; } } //BODY部 <span id="slink1"><a href="javascript:linkcontrol(1)">LINK1</a></span> <span id="slink2"><a href="javascript:linkcontrol(2)">LINK2</a></span> <span id="slink3"><a href="javascript:linkcontrol(3)">LINK3</a></span> 上記の処理だと、リンクはクリックできなくなったのですが、他のリンクがリンクにならず文字で<a href～と書かれてしまいます。 これをきちんと文字ではなくタグとして認識させるには、どのような修正をすれば良いのでしょうか。 アドバイスお願いします。 ※そもそもこのソースはあまりよろしくない書き方のような気もします。 ※もしもっと簡単に行える書き方がありましたらそちらも併せてアドバイスをお願いします。
- ベストアンサー
- JavaScript
- 動的にスタイルを変えたい
リンクをクリックしたら、JavaScriptを走らせたいと思っています。 その際、クリックしたリンクのスタイルシートを動的に変えたいのですが、 やり方を教えていただけないでしょうか。 たとえばですが、 <span class="on">項目1</span> <a href onclick="Start('2')">項目2</a> ここで、項目2をクリックしたら、JavaScriptの Startメソッドが動いた上で、 ↓ <a href onclick="Start('1')">項目1</a> <span class="on">項目2</span> に変化させたいです。 また、リンクに関しては、<a href onclick…>の形式ですと、 リンクを触った時にキャレットになってしまうので、出来れば 普通にリンクを押す時のようにしたい（手のマークのカーソルの状態） のですが、併せて教えていただけないでしょうか。
- ベストアンサー
- CSS
- クリック操作で、サイトの文字の大きさを変えたいのですが。
クリック操作で、サイトの文字の大きさを変えたいのですが。 似たような質問の回答を見つけ、以下を試してみました。↓ <a href="Javascript:void(document.body.style.fontSize='200%')">大</a> <a href="Javascript:void(document.body.style.fontSize='150%')">中</a> <a href="Javascript:void(document.body.style.fontSize='100%')">小</a> ああああ これはうまくいったのですが、リンクさせると元に戻ってしまい、 ページが変わるたびに、また操作しなければなりません。 このサイトのように http://www.pref.yamanashi.jp/index.html 一度クリックすれば、サイト全体に引き継ぐようにしたいのですが どのようにすればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 画像をクリックしてディレクトリを変更したい
Javascriptの知識はまったくないのですが、日本語のページと英語のページを双方行き来出来るようにしようと、色々調べて以下を使うと出来るという所まで辿り着きました。 <span id="link">(※)</span> <script language="JavaScript"><!-- url=window.location+""; url=url.replace("http://aaaaaaa.com/","http://aaaaaaa.com/en/"); document.getElementById("link").innerHTML="<a href=\""+url+"\">英語ページへ</a>"; --> </script> このままだと希望通りの動きをするのですが、これの「英語ページへ」の部分を画像にすると、画像は表示されず、Javascriptをオフの時に表示させるメッセージ部分が表示されてしまいます。 テキスト部分を以下に置き換えましたがダメでした。 <img src="http://aaaaaaa.com/images/language/jp.png"/> どうすれば画像を表示し、クリックしてディレクトリを移動する事が出来るのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- キーボードキーでもクリックしたときと同じようにしたい。
アプリのクリックすると表示が変わるところをキーボードで 特定のボタンを押してもクリックしたのと同じように動作する ようにすこし変更したいと思っています。 アプリでは出題、問題、回答をクリックするとその機能が 使われるようです。その各クリックを Qを押したとき出題、Wのとき問題、Eキーを押したとき回答にも 割り当てたいのですがどうすればいいかわかりません。 処理をしているところはおそらくここだと思うのですが そのプログラムを下のに追加して書いてくれませんか？ <!-- メニュー --> <span id='MainMenu' style='left:5;top:0;width:100%;height:24;background-color:#cccccc;padding:3;'> <a id='MainMenu.Item1' onclick='procMenu(1)' class='Menu' href='javascript:void(0)'>[出題] </a> <a id='MainMenu.Item2' onclick='procMenu(2)' class='Menu' href='javascript:void(0)'>[問題] </a> <a id='MainMenu.Item3' onclick='procMenu(3)' class='Menu' href='javascript:void(0)'>[回答] </a> </span>
- ベストアンサー
- JavaScript
- 押下したリンクの表示を変えたい。
うまく説明できないので、添付の画像を見ていただけると助かります。 たとえば、項目1、項目2、項目3というリンクがあって、項目1をクリックしたら JavaScriptを走らせたいのですが、その際、項目1は非リンク状態（再度押せない 状態）にしたいのです。他の項目をクリックしたら、今度はその項目が非リンクになり、 今まで非リンクだったところ（この場合は項目1）は再びリンク可に戻ります。 また、もし可能なら、ソース的には、 <span class="nonlink">項目1</span><a href=… onclick…>項目2</a><a href=… onclick…>項目2</a> のように、非リンクの場所はSPANをあてたい（スタイルシートをあてたいため）のですが、 可能でしょうか。
- ベストアンサー
- HTML
- イメージをクリックすると、音楽がなるソースについて
今晩は、HTMLの初心者です宜しくお願いします。 あるサイトでイメージをクリックすると、音楽がなる下記のようなソースを見つけました。 しかし、これをクリックするとリンクしているサイトに飛ぶことになります。 これを飛ばないように出来るのでしょうか。 宜しくお願いします。 「<a href="http://www.***/***1/" onmouseover="bg.src='../***2/***3.wav'"><font size="4"><span style="font-weight:bold;">***4</span></font></a>」
- ベストアンサー
- HTML
- クリックでclass属性を変更するjavascriptはどう書けば良い
クリックでclass属性を変更するjavascriptはどう書けば良いか教えて下さい。 クリックで要素が開閉するスクリプトのシンプルなものを探しています。 （開状態でクリック→要素を閉じる。閉状態でクリック→要素を開く） html内にonclickを書かないやり方でお願いします。 クリックする箇所はボタンではなく、aタグのリンクエリアです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- クリックするとするするとスクロールさせたい(JS)
Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }
- ベストアンサー
- JavaScript
- safariでクリックすると画面を閉じる方法
自己解決が困難な為質問させていただきます。 HTMLタグ内にて下記を記載したページをIEで読み込むと "閉じる"をクリックすると画面が閉じれます。 ＝＝＝＝＝ <a href="javascript:window.close();">閉じる</a> ＝＝＝＝＝ しかしSafariでは"閉じる"はリンク文字として認識されている(触ると色が変わる)のですが、クリックしても挙動がありません。 Safariでクリック後に画面を閉じる方法をご存知の方、よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます！JSだったのですね。 謎が解けました。 JSを使わないで出来るなら、マネをしようと思っていたのですが、 JSでしたらSPANでonclikでJS使うなりで対応してみます。 ありがとうございました。