Question

以下是我的jquery代码，它通过单击每个链接隐藏和显示每个div框。例如，有3个链接

1）正常搜索 2）提前搜索 3）项目

每个div框都有2个链接。

首先，它首先显示了高级和项目链接的第一个div内容。

如果我点击高级链接，则会显示第二个 div框。如果点击正常链接，则会显示第一个div框但是如果点击项目链接，那么我无法转到< strong>提前或正常链接。所有效果应该是从上到下。

这是jsfiddle：http://jsfiddle.net/vrtt0f9q/

<div id="first">
    <p>First div and normal search content</p>
    <b><a id="advanceSearch">Advance Search</a> |
    <a id="project">Project</a></b>
</div>

<div id="second">
    <p>Second div and advance serach content.</p>
    <b><a id="normalSearch">Normal Search</a> |
    <a id="project">Project</a></b>
</div>

<div id="third">
    <p>third div and project search content.</p>
    <b><a id="advanceSearch">Advance Search</a> | 
    <a id="normalSearch">Normal Search</a> |
    </b>
</div>

<script src="js/jquery.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {

    //$("#first").slideUp("fast");
    $("#second").slideUp("fast");
    $("#third").slideUp("fast");

    //project
    // advance search
    $("#project").click(function() {
        $("#first").slideUp("slow", function() {
            $("#third").slideDown("slow");          
        });
    });
    // advance search
    $("#advanceSearch").click(function() {
        $("#first").slideUp("slow", function() {
            $("#second").slideDown("slow");         
        });
    });
    //normal search search
    $("#normalSearch").click(function() {
        $("#second, #third").slideUp("slow", function() {
            $("#first").slideDown("slow");                                  
        });
    });

});

</script>

Answer 1

由于id必须是唯一的，否则会发生冲突，请尝试此操作，

<强> HTML

<div id="first">
    <p>First div and normal search content</p>
    <b><a class="advanceSearch">Advance Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="second">
    <p>Second div and advance serach content.</p>
    <b><a class="normalSearch">Normal Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="third">
    <p>third div and project search content.</p>
    <b><a class="advanceSearch">Advance Search</a> | 
    <a class="normalSearch">Normal Search</a> |
    </b>
</div>

<强>脚本

$(document).ready(function () {

    //$("#first").slideUp("fast");
    $("#second").slideUp("fast");
    $("#third").slideUp("fast");

    //project
    // advance search
    $(".project").click(function () {
        $("#first").slideUp("slow", function () {
            $("#third").slideDown("slow");
        });
    });
    // advance search
    $(".advanceSearch").click(function () {
        $("#first").slideUp("slow", function () {
            $("#second").slideDown("slow");
        });
    });
    //normal search search
    $(".normalSearch").click(function () {
        $("#second, #third").slideUp("slow", function () {
            $("#first").slideDown("slow");
        });
    });

});

Live demo

如果您不需要slideup()，那么您可以使用hide()或fadeOut()查看updated demo

Jquery div框显示和隐藏问题

1 个答案: