
はじめまして。jquery初心者ため宜しくお願いします。
下記ページのjqueryプラグインを使いタブを作成し、別ページからコンテンツ内の指定したアンカーポイントまでのリンクをしたいのですが上手くいきません。
https://css-tricks.com/organic-tabs/
タブは3つにわかれており、各コンテンツにはそれぞれ10個の<li></li>要素が記述、<li>それぞれにアンカーを張り別ページからそこにダイレクトリンク→移動→アンカーまでスクロールをさせたいという考えです。
過去似たようなQ&Aを見つけそちらを参考にjqueryを記述したところ、タブのアクティブとulのid指定したコンテンツ頭部分までのスクロールはできましたが要素<li>への移動は色々試してもできませんでした。
説明が下手ですいません。<li>へ移動させるにはどのような記述に変更をすればよいのでしょうか?
またこちらのタブを使用してこのような動作は可能なのでしょうか?
ご教授頂けますと幸いです。宜しくお願いします。
現在のhtml、scriptは以下のようになっています。
<index.html> <!-- リンク元の別ページ -->
<p><a href="detail.html#anker1">アンカーポイント1へ移動</a></p>
<p><a href="detail.html#anker2">アンカーポイント2へ移動</a></p>
<p><a href="detail.html#anker3">アンカーポイント3へ移動</a></p>
:
:
実際にはリンク先の<li>要素全てにアンカーを張る予定です。
<detail.html> <!-- リンク先のページ -->
<div id="example">
<ul class="nav">
<li class="nav-one"><a id="a-first" href="#first" class="current">1st</a></li>
<li class="nav-two"><a id="a-second" href="#second">2nd</a></li>
<li class="nav-three"><a id="a-third" href="#third">3rd</a></li>
</ul>
<div class="list-wrap">
<ul id="first">
<li>1st-内容1</li>
<li>1st-内容2</li>
<li>1st-内容3</li>
:
:
<li>1st-内容8</li>
<li id="anker1">アンカーポイント1 ここに移動したい</li>
<li>1st-内容10</li>
</ul>
<ul id="second" class="hide">
<li>2nd-内容1</li>
<li>2nd-内容2</li>
<li id="anker2">アンカーポイント2 ここに移動したい</li>
:
:
<li>2nd-内容9</li>
<li>2nd-内容10</li>
</ul>
<ul id="third" class="hide">
<li>3rd-内容1</li>
<li>3rd-内容2</li>
:
:
<li id="anker3">アンカーポイント3 ここに移動したい</li>
<li>3rd-内容9</li>
<li>3rd-内容10</li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END (Example) -->
<script>
$(function() {
$("#example").organicTabs({
"speed": 200
});
var hash = location.hash.replace( /[^\w\-]/g, "" );
if( hash )
{
hash = "#a-" + hash;
$( hash ).trigger( "click" );
$( "html,body" ).animate({ scrollTop: $( hash ).offset().top }, "slow" );
}
});
</script>
No.1ベストアンサー
- 回答日時:
こんにちは。
指定のプラグインは使ってないですが以下はどうでしょう。
HTMLは質問者様の提示したものに添っています。
不要クラスは削除したので、デザインで必要な場合は再度追加してください。
【HTML】
<div id="example">
<ul class="nav">
<li><a href="first" class="current">1st</a></li>
<li><a href="second">2nd</a></li>
<li><a href="third">3rd</a></li>
</ul>
<div class="list-wrap">
<ul id="first" >
<li>1st-内容1</li>
<li>1st-内容2</li>
<li>1st-内容3</li>
<li>1st-内容4</li>
<li>1st-内容5</li>
<li>1st-内容6</li>
<li>1st-内容7</li>
<li>1st-内容8</li>
<li id="anker1">アンカーポイント1 ここに移動したい</li>
<li>1st-内容10</li>
</ul>
<ul id="second" class="hide">
<li>2nd-内容1</li>
<li>2nd-内容2</li>
<li id="anker2">アンカーポイント2 ここに移動したい</li>
<li>2nd-内容9</li>
<li>2nd-内容10</li>
</ul>
<ul id="third" class="hide">
<li>3rd-内容1</li>
<li>3rd-内容2</li>
<li id="anker3">アンカーポイント3 ここに移動したい</li>
<li>3rd-内容9</li>
<li>3rd-内容10</li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END (Example) -->
<p>スクロール確認用削除してください<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
【CSS】
<style>
.hide{ display: none;}
.current{ background: #FF0;}
</style>
【jQuery】
<script>
$(function(){
var $tabs = $(".nav a");
var $content = $(".list-wrap ul");
//①基本のタブの挙動
$tabs.click(function() {
var num = $tabs.index(this);
$content.hide();
$content.eq(num).fadeIn(1000);
$tabs.removeClass('current');
$(this).addClass('current');
return false;
});
//②外部アンカーリンクから来た時の該当タブの表示関連
var p = location.hash;
var hashId = p.indexOf("#");
if(0 == hashId){
$content.hide();
$(p).parent("ul").show();
var num2 = $(p).parent("ul").index();
$tabs.removeClass('current');
$tabs.eq(num2).addClass('current');
}
//③該当タブを表示後に、アンカーへのスクロール
var p = location.hash;
var q = $(p).offset().top;
var hashId = p.indexOf("#");
if(0 == hashId){
$('html,body').animate({ scrollTop: q }, 'slow');
}
});
</script>
--------説明---------
jQueryのところにもコメント書いてますが、
①タブとコンテンツの基本の挙動をまず設置。プラグイン使わなくてもこれだけでタブは動きます。
②そして、外部からのアンカーリンクのときに、該当のタブとコンテンツがアクティブになっていないとダメなので、そのための挙動。
URLから#ハッシュを取得してその親要素の.list-wrap ulの表示と何番目の.list-wrap ulかを取得して、同じ番目の.nav aもアクティブにする。
③最後にアンカーリンクの該当箇所にスクロールします。
これで動くはずです。ちなみに①②③の順番は変えるとうまく行きません。
あともしかしたら、③はブラウザによってはうまくいかないかもしれないです。
アンカーリンクに飛ばすタイミングがブラウザによって違っているので、咬み合わないと、変な位置にアンカーしてしまうことがあります。IEとかfirefoxとか。
もしその場合は、③だけ$(function(){});から外して、javascriptの
window.onload = function() {--ここに記述--};で囲ってあげたほうがよいかもしれません。
がんばってください。
fufufunofufufu様
解りやすく親切丁寧に教えて頂きありがとうございました!
まだ全て確認した訳ではありませんが、考えていた通りの動きで可動しているのを見て感動。すごい!
jQueryまだ全然わからない事だらけですけど、これを機にもっと勉強したいと思います。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
オブジェクトがありませんのエラー
-
jQueryの配列の渡し方について
-
ドラックアンドドロップ?
-
「jQuery」アコーディオンメニ...
-
createElementが一瞬で消えてし...
-
文字をクリックしたら別の文字...
-
JSPでの画像ファイル表示
-
画像処理 C言語 元画像の幅...
-
折りたたみ式JavaScriptをcheck...
-
classの中の<a>タグにidを追加
-
2つのDIVを中央と右に横並びに...
-
javascrip 切り替えのやり方
-
lightbox2をiframeから外に表示...
-
チェックボックスの背景色って...
-
1枚の画像をクリックすると複数...
-
取得した要素がインライン要素...
-
Javascript初心者|jQueryの.va...
-
VBAでIEを動かす場合、下記の①...
-
jQueryで同じクラス名のものを...
-
imgのsrcに値を設定するには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
どの<li><a> が押されたか判別...
-
同一ページ内で、任意の文字列...
-
タブ切り替えの初期表示について
-
jQueryスライドメニューの初歩...
-
jQueryのeqで最後からn番目以降...
-
javascriptでフォーカスを当て...
-
<li></li>の数を制限
-
【javascript で動的に a タグ...
-
JS <a></a>タグ内のリンク先ア...
-
『JavaScript Accordion』について
-
カレントページ aタグではなく...
-
jQueryプラグインのメガドロッ...
-
jQueryで記事を6列表示にした...
-
大至急!!HPビルダー16の専...
-
jquery 親要素以外の取得
-
下記のようにクリックすると、...
-
jQueryでネスト構造の<li>がク...
-
ページの上下に同じタブメニュ...
-
jQueryについて質問なのですが...
おすすめ情報