Maiji の TAB 切り替え機能は JavaScript と css_navigation メニューを組み合わせたものです

ネット上にはこういうのがたくさんあるのですが、友達が私のプログラミングのコンセプトが良いと言ってくれたので（へぇ…）、私もタブスイッチを書いて、恥ずかしながらMaijiのTABスイッチと名付けました（先にすみません）。 Mark Maiji のブログを転載してください。以下から始めましょう
スライドドアを作成するには、画像が必要です

CSS

コードをコピーします コードは次のとおりです。

.nav{position:relative}
.nav dt{float:left margin: 0 2px 0 0; 位置: 相対; z-index:2}
.nav dt a{color:#555; text-decoration:none}
.nav dt a:hover{color:#000}
.nav dt a{
フロート: 左; 高さ: 24 ピクセル; オーバーフロー: 非表示;
背景: url(/upload/20071217200212700.gif) -24px
}
.nav dt a span{
表示: ブロック; パディング:0 15px 0 0;
背景:url(/upload/20071217200212700.gif) no-repeat right -24px
}
.nav dt.on a{background-position:0 0}
.nav dt.on a span{background-position:right 0}
.nav dd{
背景: #fff; 幅: 400px; パディング: 10px; 左: 23px; Visibility:hidden
}
.nav dd.on{visibility:visible}

/*-_-!*/
.nav dd a{display:block}

xhtml

コードをコピー コードは次のとおりです:

優れた記事

" href="#this" onclick= "maiji_tab(1)">動画

< ;a href="#this" href="#this" onclick="maiji_tab(2)">写真

McChicken のブログ< /span>

素晴らしい記事です!Maiji のブログへようこそ!

< ;/dd>

ビデオ!Maiji のブログへようこそ!

写真はどこですか?Maiji のブログへようこそ!

🎜>

コードは次のとおりです。

var maiji_tab = function(num){//mun に従って表示させるクラスを追加
var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//Getノード
var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd");
for (var i = 0; i < ddArray.length; i ){
dtArray[i ].className = '';//クラス
ddArray[i].className = '';
dtArray[num].className = 'on'; className = 'on';//クラスを追加
}

デモ アドレス