Show a div when click on related link and hide the

2019-02-19 09:31发布

问题:

I've this code:

<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>

I want to display a div when the related link is clicked. The problem is that this process lasts only few seconds. Someone knows why? Thanks

回答1:

Use preventDefault()

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

Demo Fiddle



回答2:

You should specify # in the href:

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

Here is the demo: JSFiddle



回答3:

You can add common class to all divs like

<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();
});