2011-02-11 7 views
0

Googleフレンドリーになるために、このスクリプトを少し変更したいと思います。jQueryサイクルでURLのインデックスではなく#anchorを表示

私はコンテンツ間でアニメーションを作成するためにjQuery Cycleを使用する1ページレイアウトを使用しています。スクリプトは現在のように、現在のスライドの番号をURLに表示します。 Ex。 "index.html#1"または "index.html#4"。それは恐ろしい見て、私はGoogleがあまりにも思うだろうと思います... ;-)

は、私はそれが#anchor代わりにそのインデックスのdivを表示したいので、URLの代わりに「index.htmlの#プロジェクト」

だろう

HTMLメニュー:

<div id="menu"> 
    <ul> 
     <li><a href="#About">About</a></li> 
     <li><a href="#Projects">Projects</a></li> 
     <li><a href="#Learning">Learning</a></li> 
    </ul> 
    </div> 

スクリプト:

//Set .active to current page link 

var url = location.hash.slice(1); 
if (url < 1) { 
    $("#menu li:nth-child(" + (location.hash.slice(1) - 1) + ") a ").addClass("active"); 
} 

//Slide effect 
    $('#logo').click(function() { 
     $('.slideshow').cycle(0); 
     return false; 
    }); 
    $('#menu li a').click(function() { 
     $('.slideshow').cycle($(this).parent().index()+1); 
     return false; 
    }); 
    $('.slideshow').cycle('pause'); 



    var index = 0, hash = window.location.hash; 
    if (hash) { 
     index = /\d+/.exec(hash)[0]; 
     index = (parseInt(index) || 1) - 1; // slides are zero-based 
    } 


    $('.slideshow').cycle({ 
     fx: 'blindY', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     speed: 700, 
     startingSlide: index, 
     cleartype: 1, 
     timeout: 3000, 
     after: function(curr,next,opts) { 
      window.location.hash = opts.currSlide + 1; 
     } 

    }); 

はですそのインデックスの代わりにdivs #anchorを表示させることは可能ですか?

window.location.hash = opts.currSlide + 1; 

へ:

window.location.hash = opts.currSlide + 1 + ': ' + 
      $("#menu li:nth-child(" + (opts.currSlide + 1) + ") a ").attr('href'); 

これはURLをproceます

答えて

1

最も簡単な方法は、コードの行を変更することです:-) ...事前にありがとうlike:http://www..........#1: #Projects。その後、残りの部分を使用する前に、この最後のビットを削除して、ハッシュを使用する残りのコードを実行する必要があります。

hash = window.location.hash.replace(/:[^0-9] .*$/, ''); 

よろしく ニール

+0

はありがとうございます。それをどうやって他の方法で作ることができますか? URLに#aboutと入力すると、スライドが表示されますか?あなたは知っていますか? –

1

にスライドさせた後になるよう各前にそれを確認しますので、後はサイクル

とコールバックを持っている:Onafter、

function Onafter() { window.location.hash = this.hash; } 
関連する問題