1

完全なコードをコピーして以下に貼り付けます。私はjavascriptとjqueryを初めて使用しますが、なぜ次のことが起こっているのかわかりません。

http://someurlhere/#1ブラウザのGoogleChromeのURLにいるとします。1アドレスバーに移動して上記のURLの番号だけを削除し、入力2してを押すenterと、ページは。のセクションに移動しませんid=2。ここで、アドレスバーに再度移動してEnterキーを押すと、。のセクションに移動しid=2ます。初めて押したときにナビゲートしないのはなぜenterですか？

私は探していましたが、これはおそらくイベントと関係があると思いましhashchangeた。スクリプトの最後の数行を追加しました。ID番号を変更すると、コンソールにメッセージが表示されますが、上記の動作は変わりません。誰かがEnterキーを押すことが最初は機能しないのに、2回目は機能する理由を説明できますか？それを修正するにはどうすればよいですか？ありがとうございました。

コード：

<html>
<head>
    <title>Selecting multiple DIV tags with jquery</title>
    <script type="text/javascript" src="./jquery.js">
    </script>
    <style type="text/css">

        html{
            overflow: hidden;
        }
        .slide {
            display: block;
            position: absolute;
            border-style: solid;
            border-width: 1px;
            top: 0px;
            left: 0px;
            padding:20px;
            height: 95%;
            width: 100%;
        }
    </style>
</head>
<body>

    <br/><br/><br/><br/><br/><br/>
    <section class="slide">This is the first div.</section>
    <br/><br/><br/><br/><br/><br/>
    <section class="slide">
        This is the second div.


    </section>

    <br/><br/><br/><br/><br/><br/>
    <section class="slide">This is the third div.</section>
    <br/><br/><br/><br/><br/><br/>
    <section class="slide">This is the fourth div.</section>
    <br/><br/><br/><br/><br/><br/>
    <section class="slide">This is the fifth div.</section>
    <br/><br/><br/><br/><br/><br/>
    <section class="slide">This is the sixth div.</section>



    <script type="text/javascript">

        // Assign ids to each section in the order they appear.
        $("section").each(function(index){
            $(this).attr('id', index+1);
            $(this).append('<button onClick="nextdiv();">Some div</button>');
            $(this).css('opacity', 0);
        });

        // Check if the current url points to a specific id. If not point
        // it to id = 1, otherwise point it to the id specified in the URL.
        var currenturl = $(location).attr('href');

        var indexhash = currenturl.lastIndexOf('#')

        if (indexhash === -1){
            var newurl = currenturl + '#1';
            $("#1").css('opacity',1);
            window.location.href = newurl;
        }
        else {
            var currentid = currenturl.substring(indexhash, currenturl.length);
            console.log(currentid);
            $(currentid).css('opacity', 1);
            window.location.href = currenturl;
            // window.location.assign(currenturl);
        }



        var newurlid = function(){
            var currenturl = $(location).attr('href');
            var indexhash = currenturl.lastIndexOf('#');
            var currentid = currenturl.substring(indexhash+1, currenturl.length);
            var newid = parseInt(currentid, 10) + 1;
            var newurl = currenturl.substring(0,indexhash+1) + newid;
            return {'newurl': newurl, 'newid': newid}
        };


        nextdiv = function(){
            console.log(newurlid().newurl);
            var newid = parseInt(newurlid().newid);
            console.log(newid);
            var selectid = '#' + newid;
            $("section").each(function(index){
            $(this).css('opacity', 0);
            });
            $(selectid).css('opacity', 1);
            window.location.href = newurlid().newurl;
        };


        $(window).bind('hashchange', function() {
                var currenturl = $(location).attr('href');
                console.log(currenturl);
                window.location.href = currenturl;
        });

    </script>
</body>
</html>
4

1 に答える 1

4

IDを数字にすることはできません。文字で始める必要があります。tab1、tab2、tab3のようなものを試してください。

ハッシュの変更に関しては、あなたは非常に近いです。現在行っているのは、ページの更新時にハッシュを解析することです。ハッシュ変更イベントもバインドされていますが、現時点では何も実行されません。ほとんどのハッシュ解析コードを次のような関数に移動する必要があります。

var hashChange = function() {

// Check if the current url points to a specific id. If not point
        // it to id = 1, otherwise point it to the id specified in the URL.
        var currenturl = $(location).attr('href');

        var indexhash = currenturl.lastIndexOf('#')

        if (indexhash === -1){
            var newurl = currenturl + '#1';
            $("#1").css('opacity',1);
            window.location.href = newurl;
        }
        else {
            var currentid = currenturl.substring(indexhash, currenturl.length);
            console.log(currentid);
            $(currentid).css('opacity', 1);
            window.location.href = currenturl;
            // window.location.assign(currenturl);
        }



        var newurlid = function(){
            var currenturl = $(location).attr('href');
            var indexhash = currenturl.lastIndexOf('#');
            var currentid = currenturl.substring(indexhash+1, currenturl.length);
            var newid = parseInt(currentid, 10) + 1;
            var newurl = currenturl.substring(0,indexhash+1) + newid;
            return {'newurl': newurl, 'newid': newid}
        };


        nextdiv = function(){
            console.log(newurlid().newurl);
            var newid = parseInt(newurlid().newid);
            console.log(newid);
            var selectid = '#' + newid;
            $("section").each(function(index){
            $(this).css('opacity', 0);
            });
            $(selectid).css('opacity', 1);
            window.location.href = newurlid().newurl;
        };

};

そして、hashchangeイベントで、DOMの準備ができたら、それを呼び出します。基本的には

 $(document).ready(hashChange);
 $(window).bind('hashchange', hashChange);
于 2012-06-26T11:47:48.820 に答える