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..

并调用 click 函数

$('.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包含一个示例，其中 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;
}
于 2013-01-03T10:41:31.927 回答