[JS]クリックで表示・非表示を切り替える

クリックで指定した要素の表示・非表示を切り替えるスクリプト。
表示エリアを稼ぎたい時に便利。

  <strong onclick="Toggle('A')">Sample</strong>
  <div id="A" style="display:block;">サンプル</div>

初期非表示にしたい場合は、display:noneとしておきます。

クリック時の呼び出しは、上記ソースだとonclickイベント属性でやってますが、
アンカータグの場合は次の例のようにhref属性に入れる事も出来ます。

<a href="javascript:Toggle('A')">Sample</a>

マウスオーバーにしたい時はonmoseoverになります。
これについてはアクションによってイベントハンドラ選んでください。

次のソースを任意の場所に貼り付けます。通常はheadタグ内。

<script type="text/javascript">
<!--
function Toggle(id) {
 div = document.getElementById(id);
 switch (div.style.display) {
  case "none":
   div.style.display="block";
   break;
  case "block":
   div.style.display="none";
   break;
 }
}
//-->
</script>

要素のstyle=”display:block”をnoneに変更することで
表示・非表示を切り替えています。
displayは要素の存在そのものを隠すものなので、noneになった場合は要素が配置されていた空間そのものもなくなります。
空間は維持したいという場合はvisibilityプロパティを使用し、
上記ソースをdiv.style.visibility = "hidden";  とします。

スタイルを違うものにすれば、線をつけるとか太字にするとかも可能です。

[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-

特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。

そういう状況がまさに今日あったので勉強がてら作ってみた。

»サンプル

“[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-“ の続きを読む

[JS]擬似クラス:hoverをtrに適用するjavascript

IEだと擬似クラスの:hoverがaタグにしか適用されないので、aタグ以外のものに:hoverつけたいときに困ることが多い。
:hoverをつける要素にaタグが入って、それがリストのように1行(ないし1ブロック)しかないのなら、aをブロック要素にすることで回避も可能だ。
でもそれだとtrでtdが2つ3つ並んでる状態になったりすると不可能になる。
というわけで、手っ取り早くいくならやはりjavascriptになると思う。

参考にtrの背景色を:hoverで変更するスクリプトを2つ紹介。

“[JS]擬似クラス:hoverをtrに適用するjavascript” の続きを読む

[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

“[JS]Javascriptの有効・無効でCSSを変更する” の続きを読む