• ベストアンサー

どうやって実装してるんですか

OkWaveトップページの”質問する、回答する、検索する”のフォームあるじゃないですか?あれでタブを移動すると普通は"カチッ"とクリック音がするのですが、鳴りません。 あれって何で実装してるんですか?私のページでも使ってみたいのでアドバイス御願いします。使用可能な言語はjava,javascriptです。 もし私の可能な言語で実装しているならばやり方も解説して欲しいです。御願いします。

noname#52631
noname#52631

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは 実際にはもっと複雑なことをしていますが要領的にはこのような感じにしていると思います <script type="text/javascript"><!-- function pch(obj1,obj2) { document.getElementById(obj1).style.display = "block"; document.getElementById(obj2).style.display = "none"; } // --></script> <style type="text/css"><!-- ul { margin:0px; } li { list-style:none; float:left; cursor:pointer; } #listA { background-color:red; } #listB { background-color:blue; } #pageA,#pageB { width:200px; height:50px; } #pageA { background-color:red; } #pageB { background-color:blue; display:none; } --></style> </head> <body> <ul> <li id="listA" onclick="pch('pageA','pageB')">PageA</li> <li id="listB" onclick="pch('pageB','pageA')">PagaB</li> </ul> <div style="clear:both;"></div> <div id="pageA">ページA</div> <div id="pageB">ページB</div> 『タブメニュー』で検索すると同じようなものが色々出てきますよ

noname#52631
質問者

お礼

検索方法まで教えてくださってありがとうございます。 ちょっとgooogle先生に教わってきます。

関連するQ&A

  • JavaScriptでタブメニューを実装したいと思っています。

    JavaScriptでタブメニューを実装したいと思っています。 http://archiva.jp/web/javascript/tab-menu.html 上記サイトよりソースを頂いて実装したいと考えているのですが、こちらのサイトでは5つタブがあるため配列を使用しています。 今回実装したいページは、タブが2つのみなので配列は必要ないかと思いました。 色々調べても勉強不足のためどうしても条件分岐に書き換える方法が分からなく行き詰ってしまったため、お力添え頂きたく質問させていただきました。 大変申し訳ないのですが、教えていただければありがたいです。 どうぞ宜しくお願い致します。

  • リンクをJavascriptで実装している理由は?

    大手の会員制サイトなどで、リンクがAタグではなくJavascriptで実装されているものがあります。なぜわざわざJavascriptで実装しているのでしょうか? 私の個人的なネットサーフィンのやり方として、リンクをCtrlボタンを押しながらクリックして新しいタブで開いてます。target="_blank"と指定されたAタグをクリックしても新しいタブが開きますが、Ctrl+クリックは画面が切り替わらないので、例えばメールボックスで見たいメールへのリンクを先に一通り開いておき、後で「メールを見る」という作業だけを連続的に行え、効率的です。 しかしJavascriptで実装されたリンクはクリック時、Ctrl(新しいタブで開く)やShift(新しいウィンドウで開く)を押していてもそれが効かず、スクリプト側の制御に委ねられる形になります。これは不便ですし、スクリプトを組む手間もかかるやり方だと思います。なぜわざわざこのような方法を使っているのでしょうか? 以下、私の予想です。 (X)HTMLの今後の仕様として、「target属性を廃止し、どのような方法でリンク先へジャンプするかはユーザに選ばせる」という動きがあるそうだが、制作者側がジャンプ方法を強制する為にJavascriptを使ったのか。しかし会員制サイトのような特にユーザ主体性の大きいサイトがユーザの利便性(操作性)を奪うような方法をとるだろうか。また、新しい仕様はまだ一般的には浸透していないので先走ってそれに合わせたということは前述の理由から考えにくいし、(X)HTMLはマークアップ言語なので仕様に沿っていないことによる不利益はSEOぐらいしか考えられない(SEO対策は重要だが)。また、pdfなどのバイナリデータがトップにヒットするケースもあるので、不利益といってもどの程度のものかは不確かである。

  • 新規にページを開いてそのページにあるフォームに任意の値を入れたい

    新規にページを開いてそのページにあるフォームに任意の値を入れたい。 タイトルのとおりですが、 例えば、 1.自分のページでとあるリンク「 javascript について質問する。」をクリックする。 2.新規ウィンドウでページ「教えて!goo - 新規質問」が開く。 3.質問タイトルに「 javascript についての質問です。」が既に入力済みとなっている。 というような処理を javascript で実装することは可能なのでしょうか。 (教えて!goo だけでなくて Yahoo!JAPAN のトップページの検索ボックスでも何でも構いません。) prototype.js などいろんな公開されている js ファイルを使用するので構いません。 もしわかる方がいましたら、よろしくお願いします。 趣味程度ですので、暇なときにご回答いただければ幸いです。

  • mysql で読み込み中です。の画面を実装したい。

    始めたばかりの超初心者です。オープンソース等を利用して phpとmysqlでブラウザ上にデーターベースを作成中ですが my sql のデータ数が多くブラウザの検索待ち時間が気になります。 30万件以上のデーターを 検索する時の待ち時間に ちょうどこのOKWaveのロード待ち時間のような 「読み込み中です。」のような画面を作りたいのですが、 javascript になるのでしょうか? どのよう方法で実装できるのか、また 簡単に実装できそうなオープンソース等あれば教えて下さい。 どうぞよろしくお願いいたします。

    • ベストアンサー
    • MySQL
  • マウスのセンタークリックのふしぎ

    最近気が付いたのですが、 OKWave の質問などのリンクをセンタークリックすると Chrome 「新しいタブで開く」 IEでも  「新しいタブで開く」 普通センタークリックはそうですよね。 MSN トップページのニュースのリンクをセンタークリックすると Chrome 「同じページが書き換わる」 IEでは  「新しいタブで開く」 発見したのはこのページだけなんですが、どういう意味があるのでしょうか?

  • index.html(トップページ)からしかアクセスできないようにページをつくる。

     タイトルの通りなのですができればjava scriptを使わずにhtml言語でかく方法があればばなあとおもっています。 またjava script で下を実行してみたのですが トップページから下の記述をしたページへ飛ぼうとするとトップページに戻りトップページからもアクセスできませんでした。 <script language=JavaScript> <!-- if(top==self){ location.href="トップページのURL"} // --> </script> どうすればいいでしょうか?よろしくおねがいします。

    • ベストアンサー
    • HTML
  • この機能はいったい何って言うものなんでしょうか?

    OKWEBでも使われている機能なのですが、例えば http://okwave.jp/ トップページの右上にある「質問履歴」をクリックして http://okwave.jp/mypage/question/history こちらのページを表示させると各履歴の横に 「設定する▼」リンクが表示されますのでそれをクリックして表示される「通知メール配信」をクリックするとページ上に新たなウィンドウのようなものが表示されます。 OKWEBの場合はこのウィンドウの移動はできませんが、マウスで移動できるものもみたことがあります。 これはどのような言語で実装できるのでしょうか?

  • ブラウザのフォームに自動入力させたい。

    あるサイトをブラウザで見た時に、ページのブランクのフォームが用意されていてボタンを押すと、値(例えば名前とか住所)が自動入力される、という処理はどうしたら、実装できるでしょうか?また、それはjava、あるいはjavascriptで実装できるでしょうか? イメージとしてあるのは、下記のページの商品申し込みページのWeb会員としてログインした後の情報の入力です。 https://umaimizu.jp/index.aspx よろしくお願いします。

  • PHPでの比較機能表の実装方法について

    初めまして。PHPの初心者で大変恐縮ではございますが、質問させていただきます。 今回、下記参考URLのような選択したアイテムを一括で比較できる機能を実装したいと 考えております。 参考URL http://creditcard.zaitsu-labs.com/search/?query=&age=&nensyu=&submit.x=120&submit.y=34 条件としましては、 (1)ユーザーが検索したデータを表示(実装済み) (2)検索結果の中から、ユーザーが任意でアイテムを選択 (3)ページ最下部から選択が行われた場合にボックスが現れる (4)ボックス内にはユーザーの選んだアイテムが表示されている (5)追加でアイテムを選択するとリアルタイムにボックスに追加される (6)比較ボタンをクリックすると、別ページにてボックスに入っていたアイテムを詳細を表示する (7)ボックス内のアイテムは×ボタンで個別に削除できる (8)一つでもボックス内にアイテムがあれば、ページ最下部に「チェックした〇〇を表示」タブが表示され そのタブをクリックするとボックス内を表示できるようにする 私が思う範囲ではこの程度かと思うのですが、(2)~(8)の実装方法の流れが分からず、 おそらくはチェックされたアイテムをセッションで保存しておき、比較ボタンを押した際に、その保存してあった ボックス内のアイテムをMySQLから呼び出すという流れかと思うのですが、具体的な実装方法が浮かばない状況です。 もし、差し支えございませんでしたら、参考サイトやテストコードなど教えていただけると大変嬉しいです。 また、この(8)で記載したの様に、ページ最下部からウインドウが飛び出してくるような形で、できれば実装したいと 考えているのですが、これは何かJQueryのようなのものを使っているのでしょうか? 説明が不十分で申し訳ありません。もし快くお答えいただける方がいれば大変嬉しく思います。

    • ベストアンサー
    • PHP
  • フォームバリデーションする際、js切っては考慮?

    JavaScriptでフォームバリデーションを実装する際、ユーザがJavaScriptを切ってたらどうなるのでしょうか? ・普通は、その場合も考慮してサーバ側でもフォームバリデーションを実装するのでしょうか? ・それとも、警告を表示してJavaScriptをonにしてもらうのでしょうか? ・ここら辺は設計というか、個々の案件によって考え方が異なるのでしょうか? ・一般的にはどう実装するのが正しいのでしょうか?