jquery - 在jquery中查找当前可见的div

标签 jquery html effects

我有四个 div 全部设置 display:none 并且在 document.ready 上我显示第一个 div.. 我有 4 个链接按钮 link1,link2...link4...我显示div1 on link1 click等等..如何找到当前在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

关于jquery - 在jquery中查找当前可见的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3316260/

相关文章:

javascript - CSS 效果,将鼠标悬停在 div 容器和所有其他 div 容器上会降低不透明度

javascript - 使用 HTML 按钮的 Ajax 日志数据

javascript - 如何在本地保存重新排序列表的新顺序? (Javascript/Jquery——不可排序插件)

html - 仅使用 id 启用复选框

angular - 为什么用户无法编辑该引导表?

html - 使用 CSS Grid 自动调整属性时如何完美地居中网格项?

javascript - 你能修复一个 div 并让它在你使用 CSS3 滚动时改变不透明度、大小和位置吗

c# - jQuery Post 之后发送到 Controller 的空值

JQuery-Mobile可折叠slideDown效果

jquery - 添加滑动到 anchor 隐藏效果