分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了在jquery中查找当前可见的div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有四个div所有设置显示：无和文件.我正在显示第一个div ..我有4个链接按钮link1,link2 … link4 …我在link1上显示div1点击等等..如何找到当前在 jquery中可见的div？

<style type="text/css">
        .ContentDivs
        {
            width: 90%;
            height: 300px;
            border: solid 5px #404040;
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <a id="Link1" href="#">Link1</a> 
            <a id="Link2" href="#">Link2</a>
             <a id="Link3" href="#">Link3</a> 
             <a id="Link4" href="#">Link4</a>
        </div>
        <div id="div1" class="ContentDivs">
        DIv1
        </div>
        <div id="div2" class="ContentDivs">
        Div2
        </div>
        <div id="div3" class="ContentDivs">
        Div3
        </div>
        <div id="div4" class="ContentDivs">
        Div4
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
              $("#div1").show().fadeIn("slow");
        });
        $('#Link1').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div1").show().fadeIn("slow");
        });
        $('#Link2').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div2").show().fadeIn("slow");
        });
        $('#Link3').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div3").show().fadeIn("slow");
        });
        $('#Link4').click(function() {
        $(".ContentDivs").fadeOut("fast");//find current div here?
            $("#div4").show().fadeIn("slow");
        });
    </script>

请参见此处的效果 http://jsbin.com/umode4/edit

解决方法

用较小的代码,你可以这样做…

jQuery的

<script type="text/javascript">
    $(document).ready(function() {
          $("#div1").show().fadeIn("slow");
    });
    $('.links a').click(function() {
        $(".ContentDivs:visible").fadeOut("fast");//find current div here?
        $("#div" + ($(this).index()+1)).show().fadeIn("slow");
    });
</script>

HTML

<div>
    <div class="links">
        <a id="Link1" href="#">Link1</a> 
        <a id="Link2" href="#">Link2</a>
        <a id="Link3" href="#">Link3</a> 
        <a id="Link4" href="#">Link4</a>
    </div>
    <div id="div1" class="ContentDivs">
        DIv1
    </div>
    <div id="div2" class="ContentDivs">
        Div2
    </div>
    <div id="div3" class="ContentDivs">
        Div3
    </div>
    <div id="div4" class="ContentDivs">
        Div4
    </div>
</div>

demo