onClickについて教えてください

2023/08/08 01:49

このQ&Aのポイント

ホームページ作成中に、ナビゲーションのプルダウンメニューについて考えています。
サブメニューを表示させるために、新しい作品紹介のロールオーバー設定を行いました。
しかし、新しい作品紹介の文字をクリックすると、新しい作品紹介ページに飛ぶようにしたいです。

ベストアンサー

onClickについて教えてください

2008/07/31 10:25

どなたかお教え願えますでしょうか。現在ホームページを作成していてナビゲーションにプルダウン（表現が間違っていたらごめんなさい）でサブメニューを表示させようとしています。下記ソースで「新しい作品紹介」という文字をロールオーバーするとサブメニューが出るように設定し、「新しい作品紹介A」や「新しい作品紹介B」や「新しい作品紹介C」や「新しい作品紹介D」や「新しい作品紹介E」といったサブメニューは表示するようになりそれぞれのページへのリンク設定ができたのですが、「新しい作品紹介」という文字をクリックすると「新しい作品紹介」というページに飛べるようにもしたいのです。 <a href="javascript:;" onMouseOver="left_Menu_Pulldown(1)" class="left_menu" id="port_01_a">新しい作品紹介</a> 現在onMouseOverの記述をしていますが、onClickなどを記述することによってリンク設定はできるのでしょうか？その記述方法や、別の手があるのであればどなたかお力をお貸しいただけますでしょうか。。説明が下手な上、表現方法が素人なものでご迷惑をおかけしますがよろしくお願いします

gogoi
お礼率58% (10/17)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2008/07/31 11:24 回答No.2

>onClickなどで表現することはできますか？ onclick="location.href='飛び先URL'" とするか onclick="window.open('飛び先URL','_SELF')" としてください

質問者

お礼 2008/07/31 11:40

早速のご回答本当にありがとうございます！早速実践してみました。きちんと飛ぶことができました。ありがとうございます！

その他の回答 (1)

yambejp
ベストアンサー率51% (3827/7415)

2008/07/31 10:51 回答No.1

>文字をクリックすると「新しい作品紹介」というページに飛べるように普通にhref=""のところに紹介ページのURLをかいてはだめなの？

質問者

お礼 2008/07/31 11:00

。。。おはずかしい。。。。飛べました。。。。これをhref=""ではなく onClickなどで表現することはできますか？

関連するQ&A

onclickは良くないのですか
以前、こちらでJAVAScriptはonclickで動作すると教えて頂き、a タグにそのように記述しています。ところが、こちらのページでそれは宜しくないと記述されており、大変衝撃を受けています。 http://d.hatena.ne.jp/HolyGrail/20080515/1210861489 質問１ aタグのonclickはプロの方はほとんど使ってないといいます。やはり上記なような理由でよく使われてないのでしょうか。質問２ JQueryを使った次のコードが紹介されていました。どうもこれがベストな方法なようです。 $(document).ready(function(){ $('#clickevent').click(function(){ alert('clicked'); }); }) alertのところにonloadで実行する関数を置けばいいのかなと思います。ただ、aタグで指定している<img>の設定がよくわかりません。 aタグのname属性なんかでidを指定するのでしょうか？コードを変えてもいいのかすら検討ができていません。ご教授のほどをお願いします。
- ベストアンサー
- JavaScript
表示が動いてしまう
ホームページビルダーでページをつくっています。左のサブメニューのところのリンク文字にマウスを持って行くと文字が大きくなるように設定したのですが、そうすると右のメインメニューのところの表示が動いてしまう（ずれてしまう）ようになります。何か、このようにならない方法はあるのでしょうか？教えてください。
- ベストアンサー
- ホームページ作成ソフト
オンマウスで表示されるテキスト
先ほどhttp://okwave.jp/qa4091921.htmlで質問させて頂いた者です。下記のソースコードをお教え頂いたのですが、初めてページを開いた時に↓の部分がすでに表示されている状態にするには、どうしたらよいのでしょうか？どうぞよろしくお願い致します。ページを開いたときに表示していたい部分 -------------------------------------------- <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> -------------------------------------------- 教えて頂いたソースコード <style> .hide{ display:none; } </style> <script> function show(id){ var obj=document.getElementById(id); var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="UL") n.className="hide"; n=n.nextSibling; } obj.className=""; } </script> <ul> <li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li> <li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li> <li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li> <li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li> </ul> <hr> <div> <ul class="hide" id="sub1"> <li>親メニュー1のサブメニュー1 <li>親メニュー1のサブメニュー2 <li>親メニュー1のサブメニュー3 <li>親メニュー1のサブメニュー4 </ul> <ul class="hide" id="sub2"> <li>親メニュー2のサブメニュー1 <li>親メニュー2のサブメニュー2 <li>親メニュー2のサブメニュー3 <li>親メニュー2のサブメニュー4 </ul> <ul class="hide" id="sub3"> <li>親メニュー3のサブメニュー1 <li>親メニュー3のサブメニュー2 <li>親メニュー3のサブメニュー3 <li>親メニュー3のサブメニュー4 </ul> <ul class="hide" id="sub4"> <li>親メニュー4のサブメニュー1 <li>親メニュー4のサブメニュー2 <li>親メニュー4のサブメニュー3 <li>親メニュー4のサブメニュー4 </ul> </div>
- ベストアンサー
- JavaScript
PowerPoint 2010について
Win7のMicrosoft PowerPoint 2010です。テキストボックスで文字を入力し、文字を選択した状態で右クリックからハイパーリンクの設定を行いました。リンク先は、同じドキュメント内の次のページです。 PDFで出力するとリンクが張っているようで文字色が変わっているのですがクリックできません。カーソルを合わせると「I」のような他のテキストと同じカーソルになりリンクとして認識してくれないようです。どのようにすればリンクとして扱えるようになりますでしょうか？また、このようなことは可能でしょうか？ 1ページ目が目次だけで2ページ以降が本文という形式を想定しています。 ■目次メニューその1　←2ページ目へリンクメニューその2-A　←3ページ目の「ポイントA」へリンクメニューその2-B　←3ページ目の「ポイントB」へリンクメニューその3　←4ページ目へリンク HTMLでいうところのアンカータグのようなイメージなのですがこんなことも実行できますでしょうか？
- ベストアンサー
- オフィス系ソフト
テーブルの背景画像にリンクを設定したい
ナビゲーションボタンを配置するのに、テーブルで、 tdの背景画像として同じ画像を設定しました。メニューはテキストで記述しました。そのテキスト部分ではなく、背景画像にリンクを設定したいのですが、できますでしょうか。テキストは左寄せで短いものもあるので、テキストリンでは、ボタンの右の方をクリックしてもリンクせず、使い勝手が悪いかと思いまして・・。文字も込みの画像でボタンを作るとどうも鮮明でないような気がしたので、このようなやり方にしようかなと考えたのですが、何かいいアドバイスありましたらよろしくお願いします。
- ベストアンサー
- HTML
onclickで自分自身の画像を変更する
メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。過去トピックで確認したのですが、回答のリンクが切れてしまっていて、確認できませんでした。１日以上試行錯誤していますが、どうにもうまくいきません。どなたかご教示いただけないでしょうか？　よろしくお願いします。 IE,Firefox対応希望。下記コードが現在のところです。 <li><a href="http://www.yahoo.com/" onmouseover="document.spp.src='images/a_rollover.gif'" onclick="document.spp.src='images/a_press.gif'" onmouseout="document.spp.src='images/a_on.gif'"> <img src="images/a_on.gif" name="spp"></a></li>
- ベストアンサー
- JavaScript
どのタグにあるonclickから取得されたか
HPのサイドバーに画像リンクをいくつか並べて表示しています。リンク方法はformで画像はinput type="image"です。このとき、それぞれの画像input type="image"に対して同じ名前の関数xxxxxでクリック処理をonclick="xxxxx()"と書いています。画像がクリックされるとformによるリンクとはまた別のリンクを使いたいのでこのような記述をしています。このときクリックされたらjavascriptでの関数xxxxxが呼ばれると思いますが、どの画像がクリックされたか調べる方法はないものでしょうか？そのどの画像がクリックされたか分かる情報を元にif文で処理を分けたいと考えています。具体的に実現したいのが例えば、サイドバーに国一覧が並んでいるとして日本アメリカ中国のような。日本をクリックするとページのメイン部分には日本関連のものが表示されますが、そのクリックのタイミングでサイドバーでは日本　－札幌　－仙台　－東京　－名古屋　－大阪　－広島　－福岡アメリカ中国といったサブメニューを表示させたいんです。このサブメニュー自体はサイドバーをtableで分割しているのでそれぞれtr にidを使ってdocument.getElementById("id").style.displayで実現できています。日本を押したときに日本のサイドバーだけを表示させて、アメリカを押したらアメリカのサイドバーだけを表示したいということです。onclick時の関数で処理しようと思ったので各項目に同じonclick="xxxxx"を書いて処理しようと思うのです。これで実現したいことと困っている所が伝わるか怪しいところですがご理解頂けて解決方法が分かる方がいましたら回答宜しくお願いします。
- ベストアンサー
- JavaScript
ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
サイトで頭文字を選ぶ時に使えるナビのデザイン
「a」から「z」、「あ」から「ん」の中から単語の頭文字を選んで次のページに行くようなナビゲーションを使ってます。次のページには選んだ頭文字から始まる単語を並べています。今はプルダウンメニューのような感じでナビゲーションを実装していますが、ちょっとかっこ悪いので使いやすくて素敵なデザインを探してます。なにかいいのがあれば教えて下さい。また、カレンダーから日付を入力するものをデートピッカーと言ったりしますが、このようなナビゲーションに名前は付いているのでしょうか？
- ベストアンサー
- CSS
ナビゲーションメニュー
ナビゲーションメニューを作ったとき、複数ページに直接記述していると面倒ですし、Webサイトの構成が変わったときの保守がしにくくなります。そこで、ナビゲーションメニューのHTMLを別な方法で取り込んで、全ページにメニューを共通して表示させることが出来るのでしょうか？出来るとしたらわかりやすいサイトと具体例（サンプル）があるサイトを教えてください。
- 締切済み
- ホームページ作成ソフト