パラメータの値を取得してactiveの位置を変える

Question

URLに下記のようなパラメータがあり、

index1.html#lg=1&slide=4

例えば上記のようにslide=4だと、
元々htmlのBOX1番目にあったclass="active"が4番目に移動するようなjsは書けますでしょうか。

<div class="test active">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

Comments

[yambejp]

「?lg=1&slide=4」ではなくハッシュで処理するのでしょうか？
ハッシュだと複数パラメータを渡しているわけではないので
独自に分解して処理する必要がありますが

[退会済みユーザー]

ご返信ありがとうございます。
#ですね。
?のような気がするのですが、現在作成しているページのデモは、#になっています。

[退会済みユーザー]

ちなみにやりたいことは、light galleryのプラグインをカスタマイズして別のものを作りたく、そのために、ご質問させて頂いた処理が必要なんです。

Answer 1

一応hashを前提に

<style>
.active{color:red;}
</style>
<script>
['DOMContentLoaded','popstate'].forEach(function(x){
  window.addEventListener(x, function(e){
    var h1=location.hash.substr(1);
    var h2={}
    h1.split("&").forEach(function(x){y=x.split("=");return h2[y[0]]=y[1];});
    if(ele=document.querySelector('.test.active')) ele.classList.remove('active');
    var slide=parseInt(h2.slide||"1")-1;
    document.querySelectorAll('.test')[slide].classList.add('active');
  });
});
</script>
<a href="#lg=1">change1</a>
<a href="#lg=1&slide=2">change2</a>
<a href="#lg=1&slide=3">change3</a>
<a href="#lg=1&slide=4">change4</a>
<a href="#lg=1&slide=5">change5</a>
<div class="test">BOX1</div>
<div class="test">BOX2</div>
<div class="test">BOX3</div>
<div class="test">BOX4</div>
<div class="test">BOX5</div>

Comments

[退会済みユーザー]

ありがとうございました。
対応できました。