addClassのやり方

質問

教えてください。

<section class="section" id="AAA">
<h3><img src="" alt="あああ" class="img-responsive"></h3>
<div class="toggle" data-plugin-toggle>
<div class="toggle">
<label>あああ一覧</label>
<div class="row">
<ul class="list-item product-thumb-info-list">
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section" id="BBB">
<h3><img src="" alt="いいい" class="img-responsive"></h3>
<div class="toggle" data-plugin-toggle>
<div class="toggle">
<label>いいい一覧</label>
<div class="row">
<ul class="list-item product-thumb-info-list">
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
</ul>
</div>
</div>
</div>
</section>
<section class="section" id="CCC">
<h3><img src="" alt="ううう" class="img-responsive"></h3>
<div class="toggle" data-plugin-toggle>
<div class="toggle">
<label>ううう一覧</label>
<div class="row">
<ul class="list-item product-thumb-info-list">
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
<li class="item col-xs-6 col-sm-4 col-md-3 product"></li>
</ul>
</div>
</div>
</div>
</section>

上記のようなページになっており、
<label>○○一覧</label>
をクリックすると、
その下の画像がバラッと表示されるようになっております。

URLで、
「http:// ～/list/」のときは、このソースのままでいいのですが
「http:// ～/list/#AAA」のときは

　<section class="section" id="AAA">
　<h3><img src="" alt="あああ" class="img-responsive"></h3>
　　<div class="toggle" data-plugin-toggle>
　　<div class="toggle">　←　この行のクラスに「active」を追加したいのです。

どのようにすれば実現できるのでしょうか？

.addClass('active')
というものを見つけたのですが
どのように書けば、ここの場所に追加というようにかけるのでしょうか？

よろしくお願いします。

回答No.1

fujillin · ベストアンサー

URLの#AAAに当たる部分は、ページロード時に location.hash を参照することで取得できます。
　http://mdn.beonex.com/en/DOM/window.location.html

該当するsectionは（↑）に基づいてIDで取得可能でしょうから、その子要素の中でご質問のdivを取得するには、
　・div class="toggle"に該当するもので2番目の要素を取得
　・label要素の親要素を取得
　・div class="row"の親要素を取得
などの方法が考えられると思いますが、全体の文書構成を考慮して適切な方法で取得してください。

何かのライブラリを用いていて、要素選択のメソッドがあるならそれによっても良いですし、querySelector()などが使えるブラウザであればこれを利用、あるいはgetElementsByClassName()やgetElementById()等を組み合わせることでも取得可能なはずです。

＞.addClass('active')というものを見つけたのですが～
おそらく何かのライブラリのメソッドだと想像しますが、それが、要素にクラスを追加するメソッドであるのなら、それを用いるのも良いでしょう。
構文などに関しては、そのライブラリの説明をご覧になってください。
（何のライブラリかわからないので、これ以上はわかりません）

activeクラスが重複することがないことがわかっているのなら、直接に
　element.className += " active";
でも宜しいかと。

お礼

ぼんやりした質問に回答いただきありがとうございます。

教えていただいたことを検索しながら
勉強したいと思います。

ありがとうございました。