淺談------location

時間 2019-12-14

標籤淺談 location 简体版

原文原文鏈接

今天在上班的時候碰到了要根據不一樣的頁面隨機添加欄目的問題，很簡單的問題，想到了判斷頁面url是否含有某字符串來進行隨機添加欄目、。。這就須要瞭解location對象。javascript

location	屬性名	屬性說明
	hash	設置或返回從井號 (#) 開始的 URL
	host	設置或返回主機名和當前 URL 的端口號。
	hostname	設置或返回當前 URL 的主機名。
	href	設置或返回完整的 URL。
	pathname	設置或返回當前 URL 的路徑部分。
	port	設置或返回當前 URL 的端口號。
	protocol	設置或返回當前 URL 的協議。
	search	設置或返回從問號 (?) 開始的 URL（查詢部分）。

以上就是location函數相關，這些在一些方面仍是至關不錯的選擇。具體事例，看下邊的demo。html

首先咱們設置首頁，首頁中有不少欄目連接，爲了方便這裏首頁用index1命名，簡化代碼。java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首頁1</title>
    </head>
    
    <body>
        <a href="index2.html">index2</a>
        <a href="index3.html">index3</a>
    </body>
</html>

其次咱們設置index2欄目的頁面，在其頁面中，咱們要引入jquer文件，和咱們本身寫的js文件。更重要的是由於是隨機添加進去的分欄（小模塊），因此，咱們要給出咱們的分欄容器~jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>index2</title>
    </head>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="index2">
            
        </div>
    </body>
</html>

同理，咱們設置index3的頁面。web

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>index3</title>
    </head>
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <div class="index3">
            
        </div>
    </body>
</html>

這樣首頁，和首頁要鏈接的頁面就設置完畢，接下來咱們須要設置的是連接到的index2，和index3頁面上的隨機分欄的內容頁.例如連接到index2的分欄是,咱們起名爲getweb函數

<div class="div1">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>
<div class="div2">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>
<div class="div3">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>
<div class="div4">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>
<div class="div5">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>

同理連接到index3的分欄內容爲getweb2url

<div class="div1">
    <ul>
        <li>123</li>
        <li>345</li>
        <li>456</li>
        <li>576</li>
    </ul>
</div>
<div class="div2">
    <ul>
        <li>額版本</li>
        <li>額版本</li>
        <li>額版本</li>
        <li>額版本</li>
    </ul>
</div>

分欄的內容頁作好後，剩下的就是咱們的js代碼了；spa

//根據url的信息來判斷須要顯示的內容。
        $(function(){
            var url=window.location.href;//獲取完整的URL
            if(url.indexOf("index2")>=0){//判斷URL中是否含有某字符串(判斷是哪個頁面)
                $.get("getweb.html",function(data){
                    $(".index2").html(data);
                });
            }else if(url.indexOf("index3")>=0){
                $.get("getweb2.html",function(data){
                    $(".index3").html(data);
                });
            }
        });

怎麼樣是否是很是簡單，這樣的根據頁面來隨機添加分欄，在後期的維護和分欄內容更替都是至關方便的，咱們只須要修改分欄內容頁面就好。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。