0

それぞれのリンクをクリックして複数の div を表示したいと思いますが、これは既に達成していると思いますが、div も非表示にするリンク クラスも作成したいと思います。

誰かが次のスクリプトの修正版を作成して、ターゲットを使用して div を非表示にするリンク クラスをプログラムできることを願っていますか?

これが私が取り組んでいるjsFiddleです：http://jsfiddle.net/XwN2L/1163/

HTML:

    <div class="buttons">
        <a  class="show" target="1">Option 1</a>
        <a  class="show" target="2">Option 2</a>
        <a  class="show" target="3">Option 3</a>
        <a  class="show" target="4">Option 4</a>
    </div>

    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>​

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#div' + $(this).attr('target')).show();
    });

前もって感謝します。

アップデート：

http://jsfiddle.net/XwN2L/1180/

これはうまくいったようです。質問で十分に明確でなかったら申し訳ありません。

HTML:

    <div class="buttons">
        <a  class="show" target="1">Option 1</a>
        <a  class="show" target="2">Option 2</a>
        <a  class="show" target="3">Option 3</a>
        <a  class="show" target="4">Option 4</a>
        <a  class="hide" target="1">Close 1</a>
        <a  class="hide" target="2">Close 2</a>
        <a  class="hide" target="3">Close 3</a>
        <a  class="hide" target="4">Close 4</a>
    </div>

    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>​

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#div' + $(this).attr('target')).show();
    });

    $('.hide').click(function () {
        $('#div' + $(this).attr('target')).hide();
    });

ご協力いただきありがとうございました。

4

3 に答える 3

2

これがあなたが望むものであるかどうかはわかりませんが、このフィドルを見ることができます。

http://jsfiddle.net/XwN2L/1165/

クラスとのリンクを作成しhideます。

クリック関数を呼び出します

$('.hide').click(function () {
  $('.targetDiv').hide();

});
于 2013-01-03T10:19:27.637 に答える
0

このようにすることもできるので、すべてを非表示にする追加のボタンを用意する代わりに、オプションを切り替えることができます。

$('.targetDiv').hide();
    $('.show').click(function () {
        $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
    });​

http://jsfiddle.net/W3HtS/1/

于 2013-01-03T10:28:56.253 に答える
0

a.showタグに属性が含まれるhref場合、target使用する属性によって新しいブラウザ ウィンドウまたはタブが開かれます。ここではデータ属性を使用することをお勧めします。

css3 を使用できる場合は、css のみのソリューションを検討してください。意味がわかりませんが、この jsfiddleには、マウスダウン アクションがコンテンツに data-attribute を使用してツールチップのようなボックスを表示する例が含まれています。

その例のcss：

a.show:active:after{
    position:absolute;
    color:green;
    margin-top:1.0em;
    margin-left:-1em;
    background: white;
    z-index:2;
    content: 'Lorem Ipsum 'attr(data-target);
    border: 1px solid #999;
    padding: 3px;
}
于 2013-01-03T10:41:31.927 に答える