使用JavaScript显示/隐藏多个div [英] Show/hide multiple divs using JavaScript

问题描述

我想通过单击相应的链接来显示多个div，我相信这已经实现了-但是，我也想创建一个隐藏div的链接类.

I would like to show multiple divs by clicking a respective link, which I believe I have already achieved - however, I would also like to create a link class which hides the div too.

我希望有人可以生成以下脚本的修订版，以便它使用目标对链接类进行编程以隐藏div?

I'm hoping someone can produce an amended version of the following script, so that it programs a link class to hide a div, using targets?

这是我正在使用的jsFiddle: http://jsfiddle.net/XwN2L/1163/

Here is the jsFiddle I'm working with: 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:

JavaScript:

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

谢谢.

更新:

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

这似乎奏效，对不起，如果我对问题的理解不够清楚.

This seemed to work, sorry if I wasn't clear enough in the question.

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:

JavaScript:

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

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

再次感谢您的所有帮助！

Thanks once again for all your help!

推荐答案

不确定这是否是您想要的，但是您可以看看这个小提琴..

not sure if this is what you want but you can have a look to this fiddle..

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

创建一个类为hide的链接.

并调用点击功能

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

});

这篇关于使用JavaScript显示/隐藏多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！