Question

我有一个按钮/链接。我想在一个按钮上多次点击打开多个div。

    <a href="#">Link</a>

<div id="one">one</div>
<div id="Two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>

有任何帮助吗？谢谢 -

用户的意思是“在单个按钮上多次点击时打开多个div”（引自评论）：

“我的意思是，当我第一次点击链接时，第一个div”one“将出现，当我点击第二次时，第二个div”Two“将出现＆amp;它将覆盖第一个div ..＆amp; it就像那样继续。“

Answer 1

<a href="#" id="clickMe" divToShow="div1">Link</a>
<div  id="1">one</div>
<div  id="2">Two</div>
<div id="3">Three</div>
<div id="4">Four</div>


<script type="text/javascript">
var counter=1;
  $("#clickMe").live("click",function (e) {
    e.preventDefault();
    $("#"+(counter++))).show();
  });

</script>

Answer 2

您可以将div标签的名称更改为div_1，div_2等，并在javascript函数中迭代它们。这可能是一个可能的问题，可以用open来表达它们的意思。

您的JavaScript可能如下所示：

<script type="text/javascript">
    var temp = 1;
    function openDiv() {
        var elem = document.getElementById('div_' + temp);
        if (elem != -1) {
            elem.doWhatEverYouMeanByOpen();
            temp = temp + 1;
        }
    }
</script>

在HTML中，您可以在点击以下链接时调用此功能：

<a href="#" onlick="openDiv();">Link</a>

Answer 3

尝试一下：http://jsfiddle.net/m9EKS/

<a href="#" id="clickMe">Link</a>

<div class="test">one</div>
<div class="test">Two</div>
<div class="test">Three</div>
<div class="test">Four</div>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        $(".test:hidden").first().show();
    });
});
</script>


<style type="text/css">
    .test { display : none; }
</style>

Answer 4

一种方法是通过Javascript（Jquery不是必需的）。

将所有div设置为最初隐藏。

<div id="one" class="showHide">one</div>
<div id="Two" class="showHide">Two</div>
<div id="Three" class="showHide">Three</div>
<div id="Four" class="showHide">Four</div>

div.showHide{visiblity:hidden}

您的链接将调用JS函数

<a href="#" onclick="showHide()">Link</a>

<script type="text/javascript">
 var clickCount=1;
 function showHide()
 {
    elementName = 'div'+clickCount;
    var switchTo = 'hidden';
    if (document.getElementById(elementName ).style.visibility == 'hidden')
        switchTo = 'visible';            

    document.getElementById(elementName ).style.visibility = switchTo ;
    clickCount++;

 }
</script>

Answer 5

如果您需要在div之间切换，可以使用此示例：

<style type="text/css">
    .show { display : block; }
    .hide { display : none; }
</style>

<script type="text/javascript">
$(document).ready(function () {
    $("#clickMe").click(function (e) {
        e.preventDefault();
        var visibleElement = $("#splash .show");
        visibleElement.removeClass("show").addClass("hide");
        if (visibleElement.next().length > 0) {
            visibleElement.next().removeClass("hide").addClass("show");
        }
        else {
            $("#splash div:first").removeClass("hide").addClass("show");
        }
    });
});
</script>

<a href="#" id="clickMe">Link</a>

<div id="splash">
    <div class="show">one</div>
    <div class="hide">Two</div>
    <div class="hide">Three</div>
    <div class="hide">Four</div>
</div>

如何通过单击一个按钮打开不同的div？

5 个答案: