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并操纵它以获取所需的值。

$(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

我想要的是，当我点击green时，它应该更改网址

您需要绑定元素的点击处理程序（以下为defElm变量）以更改window.location.hash。

当有人使用哈希标记转到URL时，它会实现它们

因此，您可以将处理程序绑定到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

注意：您可能需要将 Bin 演示下载到计算机中以检查效果（在Web浏览器中打开下载的文件）。

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

2 个答案: