更改URL中的#id并按Enter键不会导致导航到指定的id

Question

完整的代码已复制并粘贴到下面。我是javascript和jquery的新手，不确定为什么会发生以下情况：

假设我在浏览器Google Chrome中位于URL http://someurlhere/#1。如果我转到地址栏，仅删除上述URL中的数字1，键入2并按enter，则该页面不会导航到带有id=2的部分。现在，如果我再次进入地址栏，然后按Enter，它将导航到id=2部分。为什么在我第一次按enter时不导航？

我一直在搜索，我认为这可能与hashchange事件有关。我在脚本中添加了最后几行。每当更改ID号时，我都会在控制台中收到一条消息，但是上述行为保持不变。有人可以解释一下为什么按下Enter第一次无效，但是第二次有效吗，我该如何解决？谢谢。

代码：

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

Answer 1

关于散列更改，您非常接近。您目前正在做的是解析页面刷新中的哈希值。您还绑定了一个哈希更改事件，但此刻目前不执行任何操作。您需要将大多数哈希解析代码移入如下函数：

并且基本上在hashchange事件以及DOM准备就绪时就将其调用，基本上是这样

 $(document).ready(hashChange);
 $(window).bind('hashchange', hashChange);

更改URL中的#id并按Enter键不会导致导航到指定的id

问题描述投票：1回答：1

1个回答

最新问题

更改URL中的#id并按Enter键不会导致导航到指定的id

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1