使用window.location.hash更改元素的背景顏色

Question

下面的代碼只是舉例，我想用window.location.hash因此，如果有人打開一個網站，這樣，

http://fiddle.jshell.net/2uPEs/3#row=green|red 

他們得到#green行點擊觸發和#box顏色應該是紅色的，

現在我必須在URL中顯示background-color，例如它是靜態的，但在實際情況下，它將是動態的。

HTML

<div id="a" class="a-class"> 
    <table id="maTable" class="ma-table"> 
     <tr class="row"> 
      <td><div id="green">green</div></td> 
     </tr> 
     <tr class="row"> 
      <td><div id="blue">blue</div></td> 
     </tr> 
    </table> 
</div> 
<div id="b" class="b-class"> 
    <div id="box" class="box">Box</div> 
</div> 

CSS

.a-class{ width:300px; height:200px; background-color:gray; float:left;} 
.b-class{ width:300px; height:200px; float:right;} 
.row { background-color: #ccc; float: left; margin: 10px 0; padding: 1em; width: 50%; } 
.box{ width:50%; height:50%; border-style:solid;} 

JS

$(document).ready(function() { 

    $("#green").click(function() { 
     $("#box").css("background-color","red"); 
    }); 

    $("#blue").click(function() { 
     $("#box").css("background-color","yellow"); 
    }); 
}); 

這裏是Fiddle Demo。

Answer 1

嘗試這樣：

演示：從寡婦http://jsfiddle.net/qsDn5/46/

獲取URL和操縱它來獲得requred值。

$(document).ready(function() { 
var url = window.location.pathname; 
//var url = "http://fiddle.jshell.net/2uPEs/3#row=green|red"; 
var sUrl = url.split("#")[1]; 
var arr = sUrl.split("|"); 
var bdColor = arr[1]; 
var rowColor = arr[0].split("row="); 
alert("box color: "+ bdColor+ " row color" + rowColor); 


}); 

Answer 2

我要的是，當我點擊​​，應該改變URL

您需要綁定的元素的點擊處理程序（在下面defElm變量）改變window.location.hash。

當有人去用哈希代碼網址，它實現了他們

所以，你可以處理程序綁定到window.onhashchange事件，分裂哈希字符串得到變量和變化背景顏色爲#box。

在這裏你去：

$(document).ready(function() { 
    var defElm = [ 
    { 
     'element': 'green', 
     'color': 'red' 
    }, 
    { 
     'element': 'blue', 
     'color': 'yellow' 
    } 
    ]; 

    $.each(defElm, function(i, v){ 
    $("#" + v.element).click(function() { 
     window.location.hash = "#row="+ v.element + "|" + v.color; 
    }); 
    }); 

    $(window).bind('hashchange', function() { 
    var _hash = window.location.hash.trim().split('|'), 
     elm = _hash[0].substr(5) || false; 
     clr = _hash[1]   || ''; 

    if (elm) { 
     $("#" + elm).click(function() { 
     $("#box").css("background-color", clr); 
     }).click(); // trigger the click handler 
    } 
    }); 

}); 

WORKING DEMO。

注：你可能需要下載斌演示到您的計算機，以檢查效果（打開你的瀏覽器下載的文件）。