根據所選的＃href與jquery更改網址

Question

我有一個內容滑塊，我希望內容導航的各個鏈接始終顯示在url中，以便我還可以鏈接到不是滑塊的內容默認顯示。例如www.example.com/#exampleLink

我知道我可以通過$（this）.attr（「href」）找到相應的鏈接，但我不知道如何將它附加到網址..和當然，我也不希望屏幕跳到容器的頂部，當其中一個導航鏈接被點擊。

在此先感謝您的幫助！

這裏是我的腳本：

$(document).ready(function(){ 

    var itemCount = $('.container div').size(); 
    var itemWidth = $('.container div').width(); 


    $('.container').wrap('<div id="AboutSlider"></div>'); 

    $('#AboutSlider').css({ 
     'width':'640px', 
     'overflow':'hidden', 
     'position':'relative', 
     'height':'400px' 
    }); 

    $('#AboutSlider .container').css({ 
     'width':itemCount*itemWidth+'px', 
     'position':'absolute', 
     'height':'400px' 
    }); 

    $('.container .aboutContent').css({ 
     'padding-left':'0px' 
    }); 

    $('#AboutSlider .aboutContent').css({ 
     'width':'640px', 
     'float':'left', 
     'min-height':'400px' 
    }); 

    $('#AboutNav a').click(function(event) { 
     event.preventDefault(); 

     var integer = $(this).attr("rel"); 

     $('#AboutSlider .container').animate({ 
      left: -640 * (parseInt(integer) - 1) 
     }) 

     $('#AboutNav a').each(function() { 
      $(this).removeClass('active'); 
      if ($(this).hasClass('button' + integer)) { 
       $(this).addClass('active') 
      } 
     }); 

    }); 

}); 

這裏的滑塊的HTML：

<div id="Dienstleistungen"> 
         <div class="left_column"> 
         <h2>Meine Dienstleistungen</h2> 
         <h3>KOMPETENZEN</h3> 
         <ul id="AboutNav"> 
          <li><h1><a href="#Kompetenzen" class="button1 active noScroll" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li> 
          <li><h1><a href="#Frontend" class="button2 noScroll" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li> 
          <li><h1><a href="#CMS" class="button3 noScroll" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li> 
          <li><h1><a href="#SEO" class="button4 noScroll" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li> 
          <li><h1><a href="#ScreenDesign" class="button5 noScroll" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li> 
          <li><h1><a href="#Hand" class="button6 noScroll" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li> 
         </ul> 
         </div> 

         <div class="container"> 

         <div id="Kompetenzen" class="aboutContent right_columns"> 
          <h1>&Uuml;berblick</h1> 
          <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
          <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna. 
          </p> 
         </div> 
        <hr /> 
         <div id="Frontend" class="aboutContent right_column "> 
          <h1>Frontend Entwicklung</h1> 
          <p>Phasellus..</p> 
         </div> 
        <hr /> 
         <div id="CMS" class="aboutContent right_column "> 
          <h1>Content Management Systeme &amp; Online Shops</h1> 
          <p>Phasellus..</p> 
         </div> 
        <hr /> 
         <div id="SEO" class="aboutContent right_column "> 
          <h1>Suchmaschinenoptimierung (SEO)</h1> 
          <p>Phasellus..</p> 
         </div> 
        <hr /> 
         <div id="ScreenDesign" class="aboutContent right_column "> 
          <h1>Screen Design</h1> 
          <p>Phasellus..</p> 
         </div> 
        <hr /> 
         <div id="Hand" class="aboutContent right_column"> 
          <h1>Alles aus einer Hand</h1> 
          <p>Curabitur..</p> 
         </div> 
         </div><!-- AboutSlider --> 
        </div><!-- Dienstleistungen --> 

Answer 1

使用：$（本）.attr（ 'href' 屬性，$（本）.attr （ 'HREF'）+ 'attachedContent'）;

Answer 2

window.location.hash = 'someValue' 

這將添加（或更改）URL中的＃值到someValue。

Answer 3

好吧，我現在使用你的建議的組合。它現在似乎工作，我想如何。但它只是在Firefox中，如果我嘗試Chrome它改變了網址，滑塊的作品，但屏幕跳轉到滑塊容器的頂部..任何進一步的建議？

這是當前的jQuery：

$(document).ready(function(){ 

var itemCount = $('.container div').size(); 
var itemWidth = $('.container div').width(); 


$('.container').wrap('<div id="AboutSlider"></div>'); 

$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'}); 

$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'}); 

$('.container .aboutContent').css({'padding-left':'0px'}); 

$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'}); 


$('#AboutNav a').click(function(event) { 


event.preventDefault(); 

$(this).attr('href',$(this).attr('href')+' '); 

var integer = $(this).attr("rel"); 

$('#AboutSlider .container').animate({ 
    left: -640 * (parseInt(integer) - 1) 
}) 

$('#AboutNav a').each(function() { 
    $(this).removeClass('active'); 
    if ($(this).hasClass('button' + integer)) { 
     $(this).addClass('active') 
    } 
}); 
document.location.hash = $(this).attr("href"); 
}); 

});