Show Hide Div

<html>
    <head>
        <script type = "text/javascript" src= "http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script type = "text/javascript">
            $(document).ready (function() {
                $("[id^='page']").addClass('displayNone');
                $('#button1').click(function(){
                    $("[id^='page']").addClass('displayNone');
                    $("#page1").removeClass('displayNone');
                });

                $('#button2').click(function(){
                    $("[id^='page']").addClass('displayNone');
                    $("#page2").removeClass('displayNone');
                });

                $('#button3').click(function(){
                    $("[id^='page']").addClass('displayNone');
                    $("#page3").removeClass('displayNone');
                });
            })
        </script>
        <style type = "text/css">
            .buttonDiv{
                border:1px solid black;
                cursor:pointer;
            }

            .displayNone{
                display:none;
            }

        </style>
    </head>
    <body>
        <div class="buttonDiv" id="button1">Button 1</div>
        <div class="buttonDiv" id="button2">Button 2</div>
        <div class="buttonDiv" id="button3">Button 3</div>

        <div class="contentDiv" id="page1">This is page1</div>
        <div class="contentDiv" id="page2">This is page2</div>
        <div class="contentDiv" id="page3">This is page3</div>
    </body>
</html>