首頁 web前端 js教程 window.location.hash 使用说明_javascript技巧

window.location.hash 使用说明_javascript技巧

May 16, 2016 pm 06:16 PM
hash location

比如loation.href是 页面的url .但是 location.hash可以获取或设置页面的 标签值 比如http://domain/#testDemo中 咱们的location.hash 就是 #testDemo
  下面引用一个 网上的demo
一个搜索版块,功能有3个:普通搜索,高级搜索,后台管理,分别指明他们各自的hash 值:#search,#advsearch,#adminboss. 在页面初始化的时候,通过window.location.hash来判断用户需要访问的页面,也就是将要显示的版块

复制代码 代码如下:

var hash;
hash = (!window.location.hash)?"#search":window.location.hash;
window.location.hash = hash;
//这里我们解释一下(!window.location.hash)什么意思?首先如果当前页面的地址栏的链接地址 不包含#....的这些的话,直接取值的话,他会为空!比如这个例子,http://www.jb51.net/直接取 alert(window.location.hash)//""空 转化为 boolean值 为 false
// 如果 http://www.jb51.net#hello,world直接取 alert(window.location.hash)//#hello,world 转化为 boolean值 为 true
//下面的就是 可以用switch判断
//调整地址栏地址,使前进、后退按钮能使用
switch(hash){
case "#search":
show("panel1");
break;
case "#advsearch":
show("panel2");
break;
case "#adminboss":
show("panel3");
break;
}

下面引用 别人的一句话:
通过window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用(实质上欺骗了浏览器)。然后再根据hash值的不同来显示不同的面板(用户可以收藏对应的面板了),这就使得Ajax页面的浏览趋于传统化了。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Nginx伺服器中location設定實例分析 Nginx伺服器中location設定實例分析 May 24, 2023 pm 02:05 PM

首先我來大概的介紹一下location的種類和匹配規則,以nginxwiki的例子做說明:location=/{#matchesthequery/only.[configurationa]}location/{#matchesanyquery,sinceallqueriesbeginwith/,butregular#expressionsandanylongerconventionalbloblobblobaddaldfcksirbe. configurationb]}location^~/im

php如何實現Redis的Hash操作 php如何實現Redis的Hash操作 May 30, 2023 am 08:58 AM

Hash操作//為hash表中的欄位賦值。成功返回1,失敗返回0。若hash表不存在會先建立表格再賦值,若欄位已存在會覆寫舊值。 $ret=$redis->hSet('user','realname','jetwu');//取得hash表中指定欄位的值。若hash表不存在則回傳false。 $ret=$redis->hGet('user','rea

nginx location中uri的截取如何實現 nginx location中uri的截取如何實現 May 18, 2023 pm 12:07 PM

說明:location中的root和aliasroot指令只是將搜尋的根設定為root設定的目錄,即不會截斷uri,而是使用原始uri跳轉該目錄下查找文件aias指令則會截斷匹配的uri,然後使用alias設定的路徑加上剩餘的uri作為子路徑進行查找location中的proxy_pass的uri如果proxy_pass的url不帶uri如果尾部是"/",則會截斷匹配的uri如果尾部不是"/",則不會截斷匹配的uri如果proxy_pass的url帶uri

Laravel開發:如何使用Laravel Hash產生密碼雜湊? Laravel開發:如何使用Laravel Hash產生密碼雜湊? Jun 17, 2023 am 10:59 AM

Laravel是目前最受歡迎的PHPweb框架之一,為開發人員提供了許多強大的功能和元件,其中LaravelHash也是其中之一。 LaravelHash是用於密碼雜湊的PHP函式庫,可用於保護密碼的安全,並使應用程式的使用者資料更加安全。在本文中,我們將了解LaravelHash的工作原理以及如何使用它來對密碼進行雜湊和驗證。前置知識在學習Lara

Nginx怎麼設定location與rewrite規則 Nginx怎麼設定location與rewrite規則 May 18, 2023 pm 12:25 PM

location教學範例:location=/{#精確比對/,主機名稱後面不能帶任何字串[configurationA]}location/{#因為所有的位址都以/開頭,而所有這條規則將會符合到所有請求#但是正規則和最長字串會優先匹配[configurationB]}location/documents/{#匹配任何以/documents/開頭的位址,匹配符合以後,還要繼續往下搜尋#只有後面的正規表示式沒有符合到時,這一條才會採用[configurationC]}location~/document

Nginx中Server和Location的匹配邏輯是什麼 Nginx中Server和Location的匹配邏輯是什麼 May 12, 2023 am 11:10 AM

server的匹配邏輯nginx在決定請求由哪個server塊執行時,主要關注的是server塊中的listen和server_name兩個字段listen命令listen字段定義server響應的ip和端口,如果沒有明確配置listen字段,默認監聽0.0.0.0:80(root)或0.0.0.0:8080(非root)listen可以被設定為:一個ip和連接埠的組合一個單獨的ip,預設監聽80埠一個單獨的連接埠,預設監聽所有的ip介面一個unixsocket路徑其中最後一項通常只用於在不同的

Nginx伺服器中的location怎麼配置 Nginx伺服器中的location怎麼配置 May 14, 2023 pm 07:16 PM

語法location[=|~|~*|^~]/uri/{...}規則=:表示精確的uri匹配(有興趣的同學可以看一下url和uri的區別)~:表示區分大小寫的正規匹配~*:表示不區分大小寫的正規匹配!~&&!~*:表示區分大小寫不匹配的正則和不區分大小寫的不匹配的正則/:通用匹配,任何請求都會匹配到location匹配目標location匹配測試只使用請求uri的部分,而不使用參數部分。 (原因:參數的寫法太多,無法精確匹配)location匹配順序多個location配置的前提下,

nginx location匹配的方法 nginx location匹配的方法 May 15, 2023 pm 02:25 PM

nginxlocation匹配實例詳解例1、nginx配置:例2、nginx配置:例3、nginx配置:

See all articles