Display #anchor instead of index in URL, with jQuery Cycle

问题

To be Google friendly, I want to change this script a little bit.

I have a one page layout, where I use jQuery Cycle to animate between content. The script, as it is now, displays the current slide's number in the URL. Ex. "index.html#1" or "index.html#4". It looks horrible and I think Google would think too... ;-)

I want it to display the divs #anchor instead of its index, so the url would be "index.html#Projects" instead

The HTML menu:

  <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>

The script:

//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;
        } 

    });

Is it possible to make it display the divs #anchor instead of its index?

Thank you in advance... :-)

回答1:

The easiest way is to change the line of code :

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

to:

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

This will proce a URL like: http://www..........#1: #Projects. You will then have to go through the rest of the code where you use the hash and strip this last bit off before you use the remainder e.g.

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

Regards Neil

回答2:

Make it so after or before each slide it has a callback with the Cycle

So After: Onafter,

function Onafter() { window.location.hash = this.hash; }

来源：https://stackoverflow.com/questions/4969752/display-anchor-instead-of-index-in-url-with-jquery-cycle

标签

jquery

url

jquery-plugins

hash

cycle