Question

我想通过单击相应的链接来显示多个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();
    });

再次感谢您的帮助！

Answer 1

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

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

创建一个包含班级hide ..

的链接

并调用点击功能

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

});

Answer 2

你也可以这样做，所以你可以切换选项而不是额外的按钮来隐藏所有选项。

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

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

Answer 3

当a.show标记包含href属性时，您使用的target属性会触发打开新的浏览器窗口或-tab。我建议在这里使用data attribute。

如果您可以使用css3，请考虑使用css解决方案。不确定您的意思，但此jsfiddle包含一个示例，其中mousedown操作显示类似工具提示的框，其内容使用数据属性。

该示例中的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;
}

使用JavaScript显示/隐藏多个div

3 个答案: