jcueryのスライドするナビゲーションについて2

質問

「jcueryのスライドするナビゲーションについて」下記ページにて質問させてもらったものです。
http://okwave.jp/qa/q6830580.html

横スクロールサイトでスライドナビゲーションを使用しており
同じページ内の各コンテンツに移動した際にスライドも停止させるというのを
回答者さまのご回答どおり、以下のjsで実現することができました。

$(function() {

var $el, leftPos, newWidth,
$mainNav = $("#example-one");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$("li a", $mainNav).click(function(){
　$magicLine
　　.data("origLeft", $(this).position().left)
　　.data("origWidth", $(this).parent("li").width())
　　.stop().animate({
　　　left: $magicLine.data("origLeft"),
　　　width: $magicLine.data("origWidth")
　　});
});
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());

$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});

ただまた一つ問題に気づいてしまったので質問させてください。

ナビゲーションのボタンクリック後にスライドはうまく動作するのですが、
更新ボタンを押すとページは、移動後のコンテンツのままで
スライドがまたTOPに戻ってしまいます。

更新ボタンをおしてもナビゲーションを表示しているページに合わせてストップさせるか
または、コンテンツもTOPに戻すかどちらかの方法で対処できたらと思っています。

どなたかお分かりの方がおられましたらお教え頂いても宜しいでしょうか。

どうぞ宜しくお願いいたします。

デモはこちらになります。
http://css-tricks.com/examples/MagicLine/

回答No.5

mikemike7 · ベストアンサー

>htmlのナビゲーション部分は下記のようにしています。
なんだか毎度毎度、内容が変わるんですね。
まあ、liのIDが変わっただけじゃ変化はありませんが。

私の環境では正常に動いています。
ここに書いていない要素が関係しているんじゃないでしょうかね。

デモ：
http://okwave.xrea.jp/jquery/test6836508/

お礼

リスト部分は、デモとは違うIDで作成していたため、
説明不足で大変すみませんでした！

教えて頂いたjsで一からやってみたところ、問題なく動作しておりました。
現在、作成中のものは、ナビゲーションの飛び先のコンテンツもいれてあるので、そのコンテンツの中身に問題があるかもしれないです。。

お教え頂いたファイルは、URLの最後が
/test6836508/#content01
となっておりますが、

私のファイルでは、/test6836508/
までのURLになっちゃってるので、、、

問題を探して見ます！！

お教え頂いて本当にありがとうございます！

回答No.4

mikemike7

>更新ボタンを押すと、スライドが一番前に戻ってしまいます。。
えっと、リンク内の記載は、
<a href="#content01">内容1</a>
<a href="#content1">内容1</a>
のどっちですか？
後者だとすれば、
if(location.hash.indexOf("#content") === 0){
var focusnum = parseInt(location.hash.slice(8)) - 1;
となります。

補足

早速ありがとうございます！

htmlのナビゲーション部分は下記のようにしています。

<div class="nav-wrap">
<ul class="nav group" id="example-one">
<li id="gloval01" class="current_page_item"><a href="#content01">内容1</a></li>
<li id="gloval02"><a href="#content02">内容2</a></li>
<li id="gloval03"><a href="#content03">内容3</a></li>
省略・・・
</ul>
</div>

回答No.3

mikemike7

ありゃ
var focusnum = parseInt(location.hash.slice(9) - 1);
は
var focusnum = parseInt(location.hash.slice(9)) - 1;
かな

補足

ご丁寧にどうもありがとうございます！！！

下記、コードでやってみたのですが、
更新ボタンを押すと、スライドが一番前に戻ってしまいます。。

削除する部分が間違っているのでしょうか。
すみませんがもしお分かりでしたらお教え頂けたら幸いです。。

$(function() {
if(location.hash){
if(location.hash.indexOf("#content0") === 0){
var focusnum = parseInt(location.hash.slice(9)) - 1;
$("#example-one li.current_page_item").removeClass("current_page_item");
$("#example-one li").eq(focusnum).addClass("current_page_item");
}
}

var $el, leftPos, newWidth;
$mainNav = $("#example-one");

$mainNav.append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");
$("li a", $mainNav).click(function(){
　$magicLine
　　.data("origLeft", $(this).position().left)
　　.data("origWidth", $(this).parent("li").width())
　　.stop().animate({
　　　left: $magicLine.data("origLeft"),
　　　width: $magicLine.data("origWidth")
　　});
});
$magicLine
.width($(".current_page_item").width())
.css("left", $(".current_page_item").position().left)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());

$("#example-one li a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLine.stop().animate({
left: leftPos,
width: newWidth
});
}, function() {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
});

回答No.2

mikemike7

ん～。後出しかあ...。
それなら以下だけで動きます。

if(location.hash){
if(location.hash.indexOf("#content0") === 0){
var focusnum = parseInt(location.hash.slice(9) - 1);
$("#example-one li.current_page_item").removeClass("current_page_item");
$("#example-one li").eq(focusnum).addClass("current_page_item");
}
}

$("#example-one li").children("a").each(function(i){
（省略）
});
は削除してください。

回答No.1

mikemike7

ちょっと無理やりですが、こんな感じでどうでしょうか。

$(function() {

var $el, leftPos, newWidth,

を以下に修正するだけです。

$(function() {
if(location.hash){
if(location.hash.indexOf("#li") === 0){
var focusnum = location.hash.slice(3);
$("#example-one li.current_page_item").removeClass("current_page_item");
$("#example-one li").eq(focusnum).addClass("current_page_item");
}
}
$("#example-one li").children("a").each(function(i){
$(this).attr("href","#li"+i);
});
var $el, leftPos, newWidth;

// 説明
まず、全てのA要素にページ内リンク（liの番号）を与えています。

$("#example-one li").children("a").each(function(i){
$(this).attr("href","#li"+i);
});

アクセスした時にアンカーリンクがあれば
その要素にフォーカスを与えています。
if(location.hash){
（以下省略）
}

と、もう一度デモページ見たら、2箇所あるんですね＞＜
そうするとクリック状態によってはうまく稼動しません。
両方で機能させたいならもう少し考えてみます。

お礼

ご回答ありがとうございます！一度お教え頂いた方法で試してみます！補足について、すみません。全てcontens01となっておりますが、content1～5でした。。

補足

念のため、htmlも記載しておきます。
テキストリンクの部分をcssで画像ボタンにその下にスライダーが動くように設置しています。

<div class="nav-wrap">
<ul class="nav group" id="example-one">
<li id="nav1" class="current_page_item"><a href="#content01">内容1</a></li>
<li id="nav2"><a href="#content01">内容2</a></li>
<li id="nav3"><a href="#content01">内容3</a></li>
<li id="nav4"><a href="#content01">内容4</a></li>
<li id="nav5"><a href="#content01">内容5</a></li>
</div>