使用JavaScript或Jquery链接到过滤的html

Question

我希望能够链接到通过JavaScript或Jquery组织的过滤列表，如下所示。是否可以单独使用JavaScript或Jquery执行此操作，或者我是否需要使用服务器端语言来实现此目的。

我可以抓住他们来自的地址并通过JS解析数据吗？

例如www.mysite.com/#data-filter-a

<button class="active btn" data-filter="box">Show All</button>
<button class="btn" data-filter="a">Show A</button>
<button class="btn" data-filter="b">Show B</button>
<button class="btn" data-filter="c">Show C</button>
<button class="btn" data-filter="d">Show D</button>

<div class="spacer"></div>

<div id="parent">
  <div class="box a b">A &amp; B</div>
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c a">C &amp A</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>



* {
  box-sizing: border-box;
}
body {
  padding: 10px;
  background: #ecf0f1;
  font-family: helvetica, sans-serif;
  font-weight: 200;
}
.btn {
  border: none;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  border-radius: 3px;
  font-family: Arial;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  margin: 5px;
}

.active {
  background: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}
.box {
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  padding: 10px;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
  border-radius: 3px;
  color: #fff;
}
.spacer {
  clear: both;
  height: 20px;
}

var $boxs = $("#parent > .box");
var $btns = $(".btn").on("click", function() {

  var active = 
    $btns.removeClass("active")
      .filter(this)
      .addClass("active")
      .data("filter");

  $boxs
    .hide()
    .filter( "." + active )
    .fadeIn(450);

});

http://codepen.io/simeydotme/pen/ewKBr