1
+ <!doctype html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
6
+ < title > hashtag demo</ title >
7
+ < link rel ="stylesheet " href ="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css ">
8
+ < script src ="http://code.jquery.com/jquery-1.7.2.min.js "> </ script >
9
+ < script src ="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js "> </ script >
10
+ < style >
11
+ # nav {
12
+ font-size : 200% ;
13
+ width : 17.1875em ;
14
+ margin : 0 auto;
15
+ }
16
+
17
+ # nav a {
18
+ color : # 777 ;
19
+ border : 2px solid # 777 ;
20
+ background-color : # ccc ;
21
+ padding : 0.2em 0.6em ;
22
+ text-decoration : none;
23
+ float : left;
24
+ margin-right : 0.3em ;
25
+ }
26
+
27
+ # nav a : hover {
28
+ color : # 999 ;
29
+ border-color : # 999 ;
30
+ background : # eee ;
31
+ }
32
+
33
+ # nav a .selected ,
34
+ # nav a .selected : hover {
35
+ color : # 0a0 ;
36
+ border-color : # 0a0 ;
37
+ background : # afa ;
38
+ }
39
+ </ style >
40
+ </ head >
41
+ < body >
42
+ < p id ="nav ">
43
+ < a href ="#test1 "> test 1</ a >
44
+ < a href ="#test2 "> test 2</ a >
45
+ < a href ="#test3 "> test 3</ a >
46
+ < a href ="#test4 "> test 4</ a >
47
+ </ p >
48
+ < script >
49
+ $ ( function ( ) {
50
+ // Bind an event to window.onhashchange that, when the hash changes, gets the
51
+ // hash and adds the class "selected" to any matching nav link.
52
+ $ ( window ) . hashchange ( function ( ) {
53
+ var hash = location . hash ;
54
+
55
+ // Set the page title based on the hash.
56
+ document . title = 'The hash is ' + ( hash . replace ( / ^ # / , '' ) || 'blank' ) + '.' ;
57
+
58
+ // Iterate over all nav links, setting the "selected" class as-appropriate.
59
+ $ ( '#nav a' ) . each ( function ( ) {
60
+ var that = $ ( this ) ;
61
+ that [ that . attr ( 'href' ) === hash ? 'addClass' : 'removeClass' ] ( 'selected' ) ;
62
+ } ) ;
63
+ } )
64
+ // Since the event is only triggered when the hash changes, we need to trigger
65
+ // the event now, to handle the hash the page may have loaded with.
66
+ $ ( window ) . hashchange ( ) ;
67
+ } ) ;
68
+ </ script >
69
+ </ body >
70
+ </ html >
0 commit comments