0

ID とハッシュ値を使用して設定された単純な表示/非表示 div を作成しようとしています。ハッシュ値を持つリンクをクリックすると、ハッシュと同じ ID を持つ div が表示されます。いくつかのツールがあることは知っていますが、可能であれば jQuery/JS を使用してこれを行うことをお勧めします。

注意すべきことの 1 つは、すべてのハッシュと ID がページ タイトルに基づいて CMS から動的に取り込まれ、サニタイズされることです。そのため、jQuery で ID やハッシュをハードコーディングすることはできません。

これが私のセットアップです：

<div class="menu">
  <ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div id="environment">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>

よろしくお願いします、R

4

5 に答える 5

4

これを試すことができます：

$('.menu a').on('click', function(){
    $( $(this).attr('href') ).toggle(); // prop() can be used
});

フィドル：

http://jsfiddle.net/FsCHV/

于 2013-09-13T09:36:21.593 に答える
2

このようなもの（生成時に各コンテンツdivにクラスを追加できる場合）：

EDIT =>デフォルトで最初のdivを表示

http://jsfiddle.net/eNTtN/3/

HTML :

<div class="menu">


<ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div class="hidden" id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div class="hidden" id="environment">
  <p>Blabla</p>
</div>

CSS

.hidden{
    display: none;
}

JS

$(document).ready(function(){
    $(".menu li a").click(function(){
        $(".hidden").hide();
        $($(this).attr("href")).show();
    });
    /* Show the first div by default */
    $(".hidden:first").show();
});
于 2013-09-13T09:45:11.467 に答える
1

これを試して。

$(.menu li a).click(function(){
var hrefValue = $(this).attr("href");
$(hrefValue).toggle();
});
于 2013-09-13T09:38:23.123 に答える