开发者问题收集

使用 JavaScript 显示/隐藏多个 div

2013-01-03
16589
javascript jquery

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

再次感谢您的帮助！

3个回答

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

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

创建一个带有类 hide 的链接..

并调用点击函数 

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

});
bipen
2013-01-03

您也可以这样做，这样您就可以切换选项，而不必使用额外的按钮来隐藏所有内容。 

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

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

Anton
2013-01-03

当 a.show 标签包含 href 属性时，您使用的 target 属性将触发打开新的浏览器窗口或选项卡。我建议在此处使用 data 属性 。

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

该示例中的 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;
}
KooiInc
2013-01-03