パソコンQ&A

FAQにマークをつけて見やすくする

FAQ(よくある質問)などで一覧から詳細に移動するとき、記事の位置によっては「どこに移動したの?」って思うことがあります。
そんなときにはJavaScriptでマークを付けるとわかりやすいです。

心理的なことで話すと、画面の中央にある一覧をクリックするときには視点はその位置にありますが、移動した先で見てもらいたいものは 画面の上部にきます。このような移動では視点が付いていけずに迷ってしまうのではないでしょうか?
特に同じページでの移動は表示が早いということもあるでしょう。

動作について
一覧をクリックするとどうなりますか?
ページ上部へをクリックするとどうなりますか?
ほかのアンカーをクリックするとどうなりますか?
JavaScriptについて
JavaScriptの読み方は?
Javaとは違うのですか?
JavaScriptが無効のブラウザだとどうなりますか?
アンカーについて
アンカーにID属性は必要ですか?
アンカーにNAME属性は必要ですか?

動作について
一覧をクリックするとどうなりますか?
移動先にマークが付きます。
『ページ上部へ』をクリックするとどうなりますか?
マークが消えます。
ほかの一覧のアンカーをクリックするとどうなりますか?
新しい移動先にマークが付き、以前の移動先のマークは消えます。
ページ上部へ
JavaScriptについて
JavaScriptの読み方は?
ジャバスクリプト(じゃばすくりぷと)と読みます。
Javaとは違うのですか?
違います。JavaScriptはNetscape社が開発を開始し、Javaはサンマイクロシステムズが開発しています。ですが似てます。
JavaScriptが無効のブラウザだとどうなりますか?
動作しません。あくまで補助機能として考えたほうがいいです。セキュリティ上、無効にしている人もいます。
有効でも無効でも正しく閲覧できるようにしましょう。
ページ上部へ
アンカーについて
アンカーにID属性は必要ですか?
必要です。このJavaScriptではIDでマークを表示させていますが、通常のアンカーでも必要です。
アンカーにNAME属性は必要ですか?
必要です。古いブラウザだとNAME属性がないと動作しないことがあります。
ページ上部へ
<script type='text/javascript'>
<!--//
var ancid="";

function returnAnc(){
  if(ancid!=""){
    document.getElementById(ancid).innerHTML="";
    ancid="";
  }
}

function changeAnc(targ){
  returnAnc();
  document.getElementById(targ).innerHTML='<img src="./img/faqanc/mk_star.gif" width="15" height="14" />';
  ancid=targ;
}
//-->
</script>


<dl>
  <dt>動作について</dt>
  <dd><a href="#faq1_1" onClick="changeAnc('faq1_1');">一覧をクリックするとどうなりますか?</a></dd>
</dl>
<dl>
  <dt>動作について</dt>
  <dd>
    <dl>
      <dt><a id="faq1_1" name="faq1_1"></a>一覧をクリックするとどうなりますか?</dt>
      <dd>移動先にマークが付きます。</dd>
    </dl>
  </dd>
  <dd><a href="#top" onClick="returnAnc();">ページ上部へ</a></dd>
</dl>

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net