使用jQuery Cycle显示#anchor而不是URL中的索引 [英] Display #anchor instead of index in URL, with jQuery Cycle

问题描述

为了让Google友好，我想稍微改变一下这个脚本。

我有一个页面布局，我使用jQuery Cycle在内容之间进行动画制作。现在，该脚本将在URL中显示当前幻灯片的编号。防爆。 index.html＃1或index.html＃4。它看起来很可怕，我认为谷歌也会这么想......; - ）

我希望它显示divs #anchor而不是它的索引，所以url会是index.html＃Projects改为

HTML菜单：

 < div id =menu> 
< ul> 
< li>< a href =＃About>关于< / a>< / li> 
< li>< a href =＃项目>项目< / a>< / li> 
< li>< a href =＃学习>学习< / a>< / li> 
< / ul> 
< / div> 
  

脚本：

  //将.active设置为当前页面链接
 
 var url = location.hash.slice（1）; 
 if（url <1）{
 $（＃menu li：nth-​​child（+（location.hash.slice（1） -  1）+）a）.addClass（ 活性）; 
 
 
 //幻灯片效果
 $（'＃logo'）。click（function（）{
 $（'。slideshow'）。cycle（0 ）; 
返回false; 
}）; 
 $（'＃menu li a'）。click（function（）{
 $（'。slideshow'）。cycle（$（this）.parent（）。index（）+ 1）; 
返回false; 
}）; 
 $（'。slideshow'）。cycle（'pause'）; 
 
 
 
 var index = 0，hash = window.location.hash; 
 if（hash）{
 index = /\d+/.exec(hash)[0]; 
 index =（parseInt（index）|| 1） -  1; //幻灯片是基于零的
} 
 
 
 $（'。slideshow'）。cycle（{
 fx：'blindY'，// //选择你的转换type，ex：fade，scrollUp，shuffle等... 
速度：700，
 startingSlide：index，
 cleartype：1，
 timeout：3000，
 after：function（curr，next，opts）{
 window.location.hash = opts.currSlide + 1; 
} 
 
}）; 
  

是否可以显示div #anchor而不是索引？

预先感谢您......： - ）

解决方案

最简单的方法是更改代码行：

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

到：

  window.location.hash = opts.currSlide + 1 +'：'+ 
 $（＃menu li：nth-​​child（+（opts.currSlide + 1）+）a ）.attr（ 'href' 属性）; 
  

这会处理一个URL，例如： http：// www ... .......＃1：#Projects 。然后你必须通过其余的代码，在你使用散列的地方，然后去掉它，然后再使用余数，例如

  hash = window.location.hash.replace（/：[^ 0-9]。* $ /，''）; 
  

问候
尼尔

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... :-)

解决方案

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

这篇关于使用jQuery Cycle显示#anchor而不是URL中的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！