1

完整的代码复制粘贴在下面。我是 javascript 和 jquery 的新手，不知道为什么会发生以下情况：

假设我http://someurlhere/#1在浏览器 Google Chrome 中的 URL。如果我转到地址栏，只删除1上面 URL 中的数字，键入2并按enter，页面不会导航到带有 的部分id=2。现在，如果我再次进入地址栏并按下回车键，它将导航到带有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>
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 回答