Javascript 使用JQuery如何显示和隐藏不同的div'；s onClick事件_Javascript_Jquery_Css

Javascript 使用JQuery如何显示和隐藏不同的div'；s onClick事件

javascript jquery css

Javascript 使用JQuery如何显示和隐藏不同的div'；s onClick事件,javascript,jquery,css,Javascript,Jquery,Css,我想显示一个基于链接Onclick事件的div 第一次单击-显示div1 第二次单击-隐藏剩余div并显示div2 第三次单击-隐藏剩余div并显示div3 第四次单击-隐藏剩余的div并显示div1=>重复循环并继续.. 代码如下：上面的代码在第一次单击时显示所有div，但在第一次单击时应显示div1，如前所述。您应该在函数中添加一个计数器 $(document).ready(function() { var count = 0; $("#toggle_value").cl

我想显示一个基于链接Onclick事件的div

第一次单击-显示div1
第二次单击-隐藏剩余div并显示div2
第三次单击-隐藏剩余div并显示div3
第四次单击-隐藏剩余的div并显示div1=>重复循环并继续..

代码如下：

上面的代码在第一次单击时显示所有div，但在第一次单击时应显示div1，如前所述。

您应该在函数中添加一个计数器

$(document).ready(function() {
    var count = 0;

    $("#toggle_value").click(function(){
        if (count == 0) {
            $("#div1").show("fast");
            $('#div2').hide();
            count++;
        }
        else if (count == 1) {
            $("#div2").show("fast");
            ...
            count++;
        }
        else if (count == 2) {
            $("#div3").show("fast");
            ....
            count++;
        }
        else {
             $('div').hide();
             count=0;
        }
    });
});

一种简单的方法是引入一个跟踪点击的变量，如下所示：

var tracker = 0;    
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if(tracker == 0)
       {
          $("#div1").show("fast");
       }else if(tracker ==1)

       etc etc

       tracker ++;

    });
});

我的解决方案有点不同——我会根据当前div的状态（单击）来做。我的意思见下文

$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { // Second click
            // Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { // Third click
            // follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { // Fouth click
            // follow above example for hiding all and showing div1
       } else { // first click
            // All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});

我只是想警告你——我还没有测试过这段代码：）根据以下确定可见性：

希望有帮助

我试试我的枪

编辑：第二步之后，为了避免使用全局变量，最好执行以下操作

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});

我可能会这样做：（以下假设您所有的

都位于id为“container”的容器中）

$（文档）.ready（函数（）{
var$allDivs=$（“#容器>div”）；
var计数器=0；
$（“#容器>div”）。单击（函数（）{
计数器=计数器<$allDivs.length-1？计数器+1:0；
$allDivs.not（“：eq（“+计数器+”））.hide（“快速”）；
$allDivs.eq（计数器）显示（“快速”）；
});
});

我更喜欢使用“过滤”方法，使计数器的工作更轻松：

(function () {
    var divCounter = 0, divs;

    $(function () {
        divs = $('#div1, #div2, #div3');
        $('#toggle_value').click(function (e) {
            divs.hide() // hide other divs
                .filter(function (index) { return index == divCounter % 3; }) // select appropriate div
                .show('fast'); // and show it

            divCounter++;
        });
    });

})();

jQuery中的.toggle函数接受任意数量的参数函数，因此问题已经解决。请参阅事件下的文档。

这个怎么样

$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}

-将/edit添加到URL以编辑代码

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

和HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
    .display { width:300px; height:200px; border: 2px solid #000; }
    .js .display { display:none; }

</style>
</head>
<body>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        div1
    </div>

    <div id='div2' class='display' style="background-color: green;"> 
        div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
        div3
    </div>
<div>

</body>
</html>


Div示例
正文{背景色：#fff；字体：16px Helvetica，Arial；颜色：#000；}
.显示{宽度：300px；高度：200px；边框：2px实心#000；}
.js.display{display:none；}


第一组
第二组
第三组

这可以很容易地包装在插件中

首先，您必须添加查询基本文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

然后您必须添加以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“.slider_area”）.hide（1000）；
$（“#显示”）.css（“显示”、“块”）；
$（“#隐藏”）.css（“显示”、“无”）；
});
$（“#显示”）。单击（函数（）{
$（“.slider_area”）.show（1000）；
$（“#显示”）.css（“显示”、“无”）；
$（“#隐藏”）.css（“显示”、“块”）；
});
});

将上面的代码添加到标题部分，将下面的代码添加到正文部分

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

代码已准备好用于不同的图像，单击以显示和隐藏div。


<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>

var-temp=0；
var-temp1=0；
$（“#div”）。单击（函数（）{
如果（temp1==0）{
$（'#'+temp）.hide（）；
temp=‘隐藏’；
$（'Hide'）.show（）；
temp1=1；
}
否则{
$（'#'+temp）.hide（）；
temp=‘隐藏’；
$（'Hide'）.show（）；
temp1=0；
}
});

最后一条else语句可能也会显示第一个div，因为他希望它循环。谢谢Peter。正如peirix提到的，它需要将第一个div显示为一个循环。但在第四次单击中，它将隐藏所有div，而不是显示第一个div。这是不同的解决方案之一，如果我们将else大小写更改为$（'#div2'）。hide（）$"快"节目,$（“#div1”）.hide（）；计数=1；在这里，您非常强烈地假设div是根据id编号在容器中排序的，这在一般情况下可能是错误的。您不认为容器中的div比描述的要多吗？仔细想想，您是对的。另一方面，如果要按特定顺序显示它们，为什么不立即按特定顺序排列它们呢？而不是为无序的元素集创建“有序的”id属性。这可能是一些设计约束。可能是。OTOH，在编写JavaScript的大多数时候，您还可以控制HTML生成过程。以正确的方式排列div应该不会太复杂，问题是它们已经很复杂了。好。。。如果这是不可能的，那么上述解决方案确实不起作用。。。那很有趣。但在第四次点击时，它会隐藏所有div，在第五次点击时，它会再次显示div1。遗漏任何案例？！我错过了它必须一直迭代的要点。修正了。当var是全局变量时，Artem可以正常工作，在我尝试了最近发布的代码后，它停止工作。这假设“#div”+计数器实际上是下一个要显示的div。这正是你在我的回答中批评的限制。你依赖于可预测的名字，我依赖于文件顺序。区别在哪里？@Tomalak：首先，问题中描述了它。其次，可以很容易地更改为使用带有divs名称的字符串映射数组。而您的解决方案适用于更窄的情况@韦伯斯克：谢谢你指出错误。已经修好了。对于那些喜欢投反对票的人，请友好地解释一下，我能理解投反对票完全没有帮助的答案，但这里出了什么问题？谢谢你的发帖。刚刚修复了您发布并尝试的代码的语法错误。var c=1$（“#切换#值”）。单击（函数（）{$（“#div”+c）。隐藏（“快速”）；如果（c>3）c=1；$（“#div”+c++）。显示（“快速”）；}）；前3次点击效果很好，之后它会同时显示2个div…不要硬编码可以是动态的东西。如果要将此代码更改为包含100个div，该怎么办？你打算编写400行混乱的if和重复的代码吗？这是一个不同的问题，而不是问什么。我更多地理解为只有3个div，div名称通常不会编号

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>