[PROCESS3][LEVEL3]このサイトの上部の黒板風ボードのタブの切り替えにArchivaさんのJavaScriptをずっと使わせていただいていたのですが、このところIEにおいて挙動不審が見うけられた（タブを切り替えるたびにページ内リンク位置に自動スクロールしてしまう）のでjQuery idTabsに変更しました。
悩ましきIE
jQuery系のJavaScriptを選んだのは、
- jQuery系のJavaScriptを設置してからおかしくなった。
- 以前もjQuery系とPrototype系とでかみ合わなかった。
などから、どうもIEではjQuery系のJavaScriptを使う場合はjQuery系一本でいかないと具合が悪いのではないかと思われたからです。実際、jQuery系一本にしてみたところ挙動不審が収まったので全くの的外れではないように思われます。
jQueryが悪いのか、それともIEが悪いのか？私は専門家ではないので分かりませんが、FirefoxをはじめとしたSafari、Operaなどのモダンブラウザや新鋭Google Chromeなどでは問題なくページ表示されていたので、やはりIEのスクリプトに対する融通性が悪いのだと思われます。
SAMPLE
jQuery idTabsでは色々なヴァリエーションのタブメニューが紹介されています。そのうちの一つ、タブがスクエアでページ部がフェードインするタイプのものをここで取り上げます。
jQuery idTabsのサンプル
HTML
HEADセクション内
jquery.idTabs.jsのダウンロードページ：
http://www.sunsean.com/idTabs/#t3
jquery.jsのダウンロードページ：
http://docs.jquery.com/Downloading_jQuery
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>BODYセクション内
<div id="squaretab" class="pack">
<ul>
<li><a href="#b-1" class="selected">1</a></li>
<li><a href="#b-2">2</a></li>
<li><a href="#b-3">3</a></li>
<li><a href="#b-4">4</a></li>
</ul>
<div>
<p id="b-1">コンテンツ1</p>
<p id="b-2">コンテンツ2</p>
<p id="b-3">コンテンツ3</p>
<p id="b-4">コンテンツ4</p>
</div>
</div>
<script type="text/javascript">
$("#squaretab").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[@href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>※起動部分のスクリプトの置き場所はメニューの直下がベターだと思います。
CSS
サンプルは以下の通りに設定しています。
#squaretab {
width: 460px;
}
#squaretab ul {
float: left;
display: block;
width: 60px;
height: 60px;
overflow: hidden;
list-style: none;
background: #3399cc;
}
#squaretab ul li {
float: left;
}
#squaretab ul li a {
display: block;
width: 30px;
height: 30px;
color: #ffffff;
text-align: center;
line-height: 2.2;
text-decoration: none;
}
#squaretab ul li a:hover {
color: #336699;
background: #ffffff;
}
#squaretab ul li a.selected {
color: #ffffff;
background: #336699;
}
#squaretab div {
float: right;
width: 400px;
height: 60px;
color: #ffffff;
background: #3399cc;
}
#squaretab p {
padding: 10px 35px;
}
.pack:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .pack {
height: 1%;
}
/* End hide from IE-mac */
*:first-child+html .pack {
min-height: 1px;
}テクノラティ・タグ
RELATED POSTS
SEARCH
SPONSORED LINK
- NIKON D-SLR D90
- 『世界初の動画撮影機能付デジタル一眼レフカメラ｜ニコンD90』
D90LK18-55
Nikon デジタル一眼レフカメラ D90 AF-S DX 18-55 VRレンズキット
D90LK18-105
Nikon デジタル一眼レフカメラ D90 AF-S DX 18-105 VRレンズキット
D90LK18-200
Nikon デジタル一眼レフカメラ D90 AF-S DX 18-200 VRレンズキット
D90 BODY
Nikon デジタル一眼レフカメラ-本体
- Canon D-SLR EOS 5D MarkII
- 『あの5DがMarkIIへ。EOSシリーズ初、フルHD動画撮影機能を搭載。2008年11月下旬発売。』
EOS 5D MarkII BODY
デジタル一眼レフカメラ-本体
EOS 5D MarkII EF24-105L IS U
Canon EOS5D MarkII
EF24-105L IS U レンズキット付