изменить URL в соответствии с выбранным # HREF с JQuery

Question

У меня есть ползунок содержимого, и я хочу, чтобы соответствующая ссылка навигации по содержимому всегда отображалась в URL, чтобы я также мог ссылаться на содержимое ползунка, которое не отображается по умолчанию.например, www.example.com/#exampleLink

Я знаю, что могу найти соответствующую ссылку через $ (this) .attr ("href"), но я не знаю, как прикрепить ее к URL.и, конечно, я также не хочу, чтобы экран перескочил на верх контейнера, когда нажата одна из навигационных ссылок ..

Заранее благодарен за помощь!

здесьмой сценарий:

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

window.location.hash = 'someValue'

Это добавит (или изменит) значение после # в URL к someValue.

Answer 2

Хорошо, я использовал комбинацию ваших предложений. Кажется, сейчас работает так, как я этого хотел. НО это происходит только в Firefox, и если я пытаюсь использовать Chrome, он изменяет URL-адрес, слайдер работает, но экран переходит на верх контейнера слайдера.

Вот текущий 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");
});

});

Answer 3

use: $ (this) .attr ('href', $ (this) .attr ('href') + 'attachContent');