怎么用jquery把div轮流显示？

怎么用jquery把div轮流显示？
就是点一下1消失 2显示 再点一下2消失 3显示 再点一下3显示1显示 一次循环
用jquery来做 并且不至3个div  或者更多
<a href="javascript:" class="more">换一换</a>
<div>11111</div>
<div style="display:none">22222</div>
<div style="display:none">33333</div><script>
$(document).ready(function () {
    $("more").click(function () {        
    $("div").toggle();
});
</script>
当然这个是不对的 toggle()只能实现2个切换求大神指点！！

解决方案 »

  1.   

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <a href="javascript:" class="more">换一换</a>
    <div class="sel">11111</div>
    <div class="unsel">22222</div>
    <div class="unsel">33333</div><script>
    $(document).ready(function () {
    $(".sel").show(); //选中的显示
    $(".unsel").hide(); //未选中的不显示
    var first = $(".sel"); //第一项 $(".more").click(function () {
    $(".sel").toggle(function(){$(this).prop("class","unsel")}); //隐藏自己 if($(".sel").next().prop("class")!="unsel")
    first.toggle(function(){$(this).prop("class","sel")}); //自己是最后一项，则显示first
    else
    $(".sel").next().toggle(function(){$(this).prop("class","sel")}); //否则显示下一个
    })
    });
    </script>
      

  2.   

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <a href="javascript:" class="more">换一换</a>
    <div class="sel">11111</div>
    <div class="unsel">22222</div>
    <div class="unsel">33333</div><script>
    $(document).ready(function () {
    $(".sel").show(); //选中的显示
    $(".unsel").hide(); //未选中的不显示
    var first = $(".sel"); //第一项 $(".more").click(function () {
    $(".sel").toggle(function(){$(this).prop("class","unsel")}); //隐藏自己 if($(".sel").next().prop("class")!="unsel")
    first.toggle(function(){$(this).prop("class","sel")}); //自己是最后一项，则显示first
    else
    $(".sel").next().toggle(function(){$(this).prop("class","sel")}); //否则显示下一个
    })
    });
    </script>
    忘了上标签，哎
      

  3.   

    恩，这样效果更好些
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <a href="javascript:" class="more">换一换</a>
    <div class="sel">11111</div>
    <div class="unsel">22222</div>
    <div class="unsel">33333</div><script>
    $(document).ready(function () {
    $(".sel").show(); //选中的显示
    $(".unsel").hide(); //未选中的不显示
    var first = $(".sel"); //第一项 $(".more").click(function () {
    var curr = $(".sel");
    curr.toggle(function(){
    $(this).prop("class","unsel");
    if(curr.next().prop("class")!="unsel")
    first.toggle(function(){$(this).prop("class","sel")}); //自己是最后一项，则显示first
    else
    curr.next().toggle(function(){$(this).prop("class","sel")}); //否则显示下一个
    }); //隐藏自己 })
    });
    </script>
      

  4.   


    <style type="text/css">
    div{height:100px;width:100px;border:1px #8FA4F5 solid;background-color:red;color:#FFFFFF}
    #2{display:none}
    #3{display:none}
    #4{display:none}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var k=$("div").length;
    $("div").click(function(){
    var t=$(this).attr("id");
    $(this).hide();
    t++;
    t=t>k? 1:t;
    $("#"+t).show();

    })
    })
    </script>
    <div id="1">11111</div>
    <div id="2">22222</div>
    <div id="3">33333</div> 
    <div id="4">44444</div> 
      

  5.   

    给一个点自己轮流显示的<script>
    $(function () {
    $("[name^='div']").hide();
    $("[name='div1']").show();
    $("[name^='div']").click(function(){
    $(this).hide();
    if(this.name==$("div:last").attr("name")){
    $("div:first").show();
    }else{
    $(this).next().show();
    }
    });
    }); 
    </script>
    <body>
    <div name="div1">11111</div>
    <div name="div2">22222</div>
    <div name="div3">33333</div>
    <div name="div4">44444</div>
    <div name="div5">55555</div>
    <div name="div6">66666</div>
    </body>