Javascript 更改url中的#id并按enter键不会导致导航到指定的id_Javascript_Html_Jquery_Url

Javascript 更改url中的#id并按enter键不会导致导航到指定的id

javascript html jquery url

Javascript 更改url中的#id并按enter键不会导致导航到指定的id,javascript,html,jquery,url,Javascript,Html,Jquery,Url,完整的代码复制并粘贴在下面。我不熟悉javascript和jquery，不知道为什么会发生以下情况：假设我在URLhttp://someurlhere/#1在浏览器Google Chrome中。如果我转到地址栏，仅删除上述URL中的编号1，键入2，然后按enter，则页面不会导航到id=2的部分。现在，如果我再次进入地址栏并按enter键，它将导航到id=2的部分。为什么我第一次按enter键时它不导航我一直在搜索，我认为这可能与hashchange事件有关。我在脚本中添加了最后几行。无论

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

假设我在URL

http://someurlhere/#1

在浏览器Google Chrome中。如果我转到地址栏，仅删除上述URL中的编号

，键入

，然后按

enter

，则页面不会导航到id=2的部分。现在，如果我再次进入地址栏并按enter键，它将导航到id=2的部分。为什么我第一次按enter键时它不导航

我一直在搜索，我认为这可能与

hashchange

事件有关。我在脚本中添加了最后几行。无论何时更改id号，我都会在控制台中收到一条消息，但上述行为保持不变。有人能解释一下为什么第一次按enter键不起作用，但第二次按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>


使用jquery选择多个DIV标记
html{
溢出：隐藏；
}
.幻灯片{
显示：块；
位置：绝对位置；
边框样式：实心；
边框宽度：1px；
顶部：0px；
左：0px；
填充：20px；
身高：95%；
宽度：100%；
}









这是第一组。









这是第二组。









这是第三组。









这是第四组。









这是第五组。









这是第六组。
//按显示顺序为每个部分分配ID。
$（“节”）。每个功能（索引）{
$（此）.attr（'id'，索引+1）；
$（this.append（'somediv'）；
$（this.css（'opacity'，0）；
});
//检查当前url是否指向特定id。如果不指向
//将其指向id=1，否则将其指向URL中指定的id。
var currenturl=$（位置）.attr（'href'）；
var indexhash=currenturl.lastIndexOf（“#”）
如果（indexhash===-1）{
var newurl=currenturl+'#1'；
$（“#1”）.css（'opacity'，1）；
window.location.href=newurl；
}
否则{
var currentid=currenturl.substring（indexhash，currenturl.length）；
console.log（currentid）；
$（currentid）.css（'opacity'，1）；
window.location.href=currenturl；
//window.location.assign（currenturl）；
}
var newurlid=函数（）{
var currenturl=$（位置）.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；
返回{'newurl'：newurl，'newid'：newid}
};
nextdiv=函数（）{
log（newurlid（）.newurl）；
var newid=parseInt（newurlid（）.newid）；
console.log（newid）；
变量selectid='#'+newid；
$（“节”）。每个功能（索引）{
$（this.css（'opacity'，0）；
});
$（selectid）.css（'opacity'，1）；
window.location.href=newurlid（）.newurl；
};
$（窗口）.bind（'hashchange'，function（）{
var currenturl=$（位置）.attr（'href'）；
console.log（currenturl）；
window.location.href=currenturl；
});

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

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

顺便说一句，您可以使用location.hash来获取前导的#1，而不是使用JQuery来获取href，然后找到#的索引，谢谢您的提示。当然，你可以使用location.hash来获取前导的#1，而不是使用JQuery来获取href，然后找到#的索引，谢谢你的提示。我一定会用的，谢谢。我把ID改成了s1，s2。。。然而，我仍然有我的帖子中提到的问题。谢谢，皮特。这解决了我在上面发布的问题。但是，它破坏了

somediv

按钮的功能。在我接受答案之前，我将尝试找出它。这是因为nextdiv（）函数不再在全局范围内，例如，您添加的单击处理程序没有访问它的权限。将nextdiv函数声明移到hashChange函数之外（并将其泄漏到全局命名空间）将修复此问题。阅读：（绑定事件的更好方法）（全局名称空间）是的，我想是的。谢谢现在我又发生了一件奇怪的事情。但这是另一个问题，所以请回答一个新问题。谢谢。我把ID改成了s1，s2。。。然而，我仍然有第二节提到的问题