タブコンテンツ以下のページ内リンクは注意(10/04/22修正版）
()
yuga.jsの簡易タブ機能を使ったページを制作したわけですが、
どうやらその簡易タブコンテンツのすぐ下にページ内リンクを設定し、他ページからそこへアクセスすると、意図した場所へ飛んでくれない様子。ずれる。
説明がとてもしづらいけれど、
別にyuga.jsに限らず、大体この手のjsを使ったタブコンテンツは、
フォーカスされたタブの内容だけ目に見える形にしているだけで、それ以外もちゃんと読み込んでいるけれど、見えないようにしているもの。
↑アクセス時には<div id="tab1">だけ表示させる
アクセス時は、ブラウザの見た目には<div id="tab1">の下にリンク先のコンテンツがあるように見えますが、実際にはソースの通り、<div id="tab3">の下にコンテンツがあります。
つまり、ブラウザを通してみると、<div id="tab2"><div id="tab3">の部分がないように見えています。
しかし、ページ内リンクで他ページからアクセスすると、その2つのdivがあるものとして（この2つのdivの高さ分を計算した上で）位置を計算してしまうようです。
単純に<div id="tab2"><div id="tab3">の高さがそれぞれ300pxあったら、600px分下にリンクされます。
なので、リンク先がずれます。
仕方ないので、<div id="tab2">の中の適当な箇所にid="box"を振ると、まあそれなりに意図した位置にリンクしてくれます。
何を言っているんだかよくわからないかと思いますが、
自分でも説明しててよくわからなくなってきます。
画像も入れつつ説明できたらいいんですが、時間ないです。
備忘録なんで...。
まあこれはほんとやってみて下さいというしかないですね。
※10/04/22追記
どうやら、以上のやり方だとIEでうまくいかない様子。
仕方ないので、jQueryで対処。
これでIEもできるようになったんだけど、
でもJSオフにしている人にはどう対処しようってとこです。
タブコンテンツのJSソースを書き換えればうまくいく気がする。
タブコンテンツごとのソースを配列にツッコんで、タブがクリックされたらその内容に差し替えるようにすれば、見えていないコンテンツがなくなり、上記の処置をしなくてもイケそうな気が。
やってみよう。
P.S
花見できない...。
いつになったら終わった感を得られるんだろう...。
どうやらその簡易タブコンテンツのすぐ下にページ内リンクを設定し、他ページからそこへアクセスすると、意図した場所へ飛んでくれない様子。ずれる。
説明がとてもしづらいけれど、
別にyuga.jsに限らず、大体この手のjsを使ったタブコンテンツは、
フォーカスされたタブの内容だけ目に見える形にしているだけで、それ以外もちゃんと読み込んでいるけれど、見えないようにしているもの。
<!-- タブコンテンツ -->
<ul class="tabNav">
<li><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ3</a></li>
<li><a href="#tab3">タブ3</a></li>
</ul>
<div id="tab1">1のタブ内容</div>
<div id="tab2">2のタブ内容</div>
<div id="tab3">3のタブ内容</div>
<!-- ページ内リンクコンテンツ -->
<div id="box">
愛しさと切なさと心強さと
</div>
↑アクセス時には<div id="tab1">だけ表示させる
アクセス時は、ブラウザの見た目には<div id="tab1">の下にリンク先のコンテンツがあるように見えますが、実際にはソースの通り、<div id="tab3">の下にコンテンツがあります。
つまり、ブラウザを通してみると、<div id="tab2"><div id="tab3">の部分がないように見えています。
しかし、ページ内リンクで他ページからアクセスすると、その2つのdivがあるものとして（この2つのdivの高さ分を計算した上で）位置を計算してしまうようです。
単純に<div id="tab2"><div id="tab3">の高さがそれぞれ300pxあったら、600px分下にリンクされます。
なので、リンク先がずれます。
仕方ないので、<div id="tab2">の中の適当な箇所にid="box"を振ると、まあそれなりに意図した位置にリンクしてくれます。
何を言っているんだかよくわからないかと思いますが、
自分でも説明しててよくわからなくなってきます。
画像も入れつつ説明できたらいいんですが、時間ないです。
備忘録なんで...。
まあこれはほんとやってみて下さいというしかないですね。
※10/04/22追記
どうやら、以上のやり方だとIEでうまくいかない様子。
仕方ないので、jQueryで対処。
$(document).ready(function(ev){
var myURL = location.href;
if(myURL == "http://www.hoge.com#contents4"){
$('html,body').animate({ scrollTop: 3000 }, 'slow');
}
});
アクセスしたページがhttp://www.hoge.com#contents4だったら、上から3000ピクセル目の位置にスクロールするという内容。これでIEもできるようになったんだけど、
でもJSオフにしている人にはどう対処しようってとこです。
タブコンテンツのJSソースを書き換えればうまくいく気がする。
タブコンテンツごとのソースを配列にツッコんで、タブがクリックされたらその内容に差し替えるようにすれば、見えていないコンテンツがなくなり、上記の処置をしなくてもイケそうな気が。
やってみよう。
P.S
花見できない...。
いつになったら終わった感を得られるんだろう...。
