关于javascript：更改网址中的#id并按Enter键不会导致导航到指定的ID

Changing #id in the url and pressing enter does not result in navigation to the specified id

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

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

我一直在寻找，我认为这可能与hashchange事件有关。我在脚本中添加了最后几行。每当我更改ID号时，我确实会在控制台中收到一条消息，但上面描述的行为保持不变。有人能解释为什么按Enter键第一次不起作用，但第二次起作用，我该如何解决？谢谢您。

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

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

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

</body>
</html>

相关讨论

ID不能是数字，它们必须以字符开头。尝试类似于tab1、tab2、tab3的方法。

至于散列值的变化，你是非常接近的。现在您要做的是在页面刷新时解析哈希。您还绑定了一个哈希更改事件，但目前它不做任何操作。您需要将大部分哈希分析代码移动到如下函数中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

在hashchange事件上调用它，当dom准备好时，基本上

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