0

href=""ボタンの a を動的に変更する方法について質問があります。

以下の jsfiddle は、ランディング ページから始まるビューポートの下部に固定されたボタンを示しています。

http://jsfiddle.net/Hm6mA/3/

ボタンのhtmlは次のようになります。

<div class="button">
    <a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
        <img src="img/down.png" alt="down">
    </a>
</div>

クリックすると、次のセクションにスクロールし、href="" をページの次のセクションに変更します。したがって、最初にクリックすると、href は #second に変わります。ユーザーがセクションを手動でスクロールしたときにも変更する必要があることは明らかです。

これは、単一ページの Web サイト用です。どうすればそのようなことをすることができますか？

4

4 に答える 4

2

.prop()を使用してその値を変更します

$(".button").on('click', function(){
    $('.button').find('a').prop('href', '#services');
});

デモ

于 2013-10-06T07:29:47.680 に答える
1

私はjqueryに慣れていません。これは純粋なJavaScriptソリューションです。それは確かにハッシュ値を変更します。

<body>

    <div id="sections">

        <section id="s100">asdfasd</section>
        <section id="s101"></section>
        <section id="s102"></section>
        <section id="s103"></section>
        <section id="s104">asdfasdasdfsdf</section>
        <section id="s105"></section>

    </div>

    <div class="nav-bar">

        <a id="next-button" class="button" href="#s100">Next</a>

    </div>

    <script type="text/javascript">

        var sections = document.getElementById("sections");

        var nextButton = document.getElementById('next-button');

        sections.onscroll = function (evt) {

        }


        var counter = 100;
        var limit = 105;

        // closure
        nextButton.onmouseup = function (evt) {

            var incCounter = function () {
                // add your custom conditions here

                if(counter <= limit)
                    return counter++;
                return 0;
            };

            var c = incCounter();
            if(c != 0)
                this.setAttribute('href', "#s" + c);
        }

    </script>

</body>

CSS

html, body {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #sections {
            height: 50%;
            width: 100%;
            overflow: scroll;
        }

        .nav-bar {
            margin: 30px 20px;
        }

        .button {
            text-decoration: none;
            border: 1px solid #999;
            padding: 10px;
            font-size: 120%;
        }
于 2013-10-06T08:05:10.347 に答える
1

そのための小さな jQuery プラグインを作成し、GitHub にプッシュしました。https://github.com/ferdinandtorggler/scrollstack

あなたが基本的にやりたいことは、呼び出すことです

$('.button').scrollstack({stack: ['#first', '#second', ... ]});

ボタンで呼び出すときは、リンクさえ必要ありません。それで、それをチェックして、それがあなたのために働くかどうか私に知らせてください. ;)

ここで試してみて、詳細を読むことができます: http://ferdinandtorggler.github.io/scrollstack/

于 2013-10-06T08:27:02.817 に答える