Question

我有一个内容滑块，我希望内容导航的相应链接始终显示在网址中，这样我也可以链接到默认情况下未显示的滑块内容。例如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

使用：$（this）.attr（'href'，$（this）.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");
});

});

根据所选的#href和jquery更改url

3 个答案: