Question

我有这段代码：

<head>
<script>

        $(document).ready(function(){
        // Optional code to hide all divs
        $("div").hide();
          // Show chosen div, and hide all others
        $("a").click(function () 
        {
            $("#" + $(this).attr("class")).show().siblings('div').hide();
        });

    });

</script>

</head>

<body>
    Click a button to make it visible:<br /><br />
<a href="" class="one">One</a>
<a href="" class="two">Two</a>
<a href="" class="three">Three</a>
<a href="" class="four">Four</a><br /><br />

    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div><br/><br/>




</body>

我想在点击相关链接时显示div。问题是这个过程只持续几秒钟。有人知道为什么吗？感谢

Answer 1

使用preventDefault()

        $("a").click(function (e) 
    {
            e.preventDefault();
        $("#" + $(this).attr("class")).show().siblings('div').hide();
    });

演示Fiddle

Answer 2

您应在href中指定＃：

<a href="#"></a>

以下是演示：JSFiddle

Answer 3

您可以为所有div添加公共类，例如

<div id="one" class="div">One</div>
<div id="two" class="div">Two</div>
<div id="three" class="div">Three</div>
<div id="four" class="div">Four</div>

JS：

$("a").click(function (){         
    $(".div").hide();            
    $("#" + $(this).attr("class")).show().siblings('div').hide();
});

单击相关链接时显示div并隐藏其他链接

3 个答案: