javascript - 通过点击事件使部分显示

Question

我试图在单击按钮时显示一个部分，但我得到的是空白屏幕。我不知道这是为什么。任何的意见都将会有帮助。我正在尝试显示 arnold-page div。

<section class="middlePage"><!-- START MIDDLE SECTION -->
            <div class="album-nav">
        <button class="arnold">Arnold</button>
        <button class="cats">Cats</button>
        <button class="dogs">Dogs</button>
        <button class="batman">Batman</button>
        <button class="lions">Lions</button>
        <button class="tigers">Tigers</button>
    </div>




    <div class="arnold-page">   <!-- START DIV display-on --><h1>Arnold</h1>
        <div id="arnold1">
            <a href="#"><img src=" "></a>
            <p>Photo 1</p>
        </div>

        <div id="arnold2">
            <a href="#"><img src="images/arnold.jpg"></a>
            <p>Photo 2</p>
        </div>

        <div id="arnold3"> 
            <a href="#"><img src=" "></a>
            <p>Photo 3</p>
        </div>

        <div id="arnold4">
            <a href="#"><img src=" "></a>
            <p>Photo 4</p>
        </div>

        <div id="arnold5">
            <a href="#"><img src=" "></a>
            <p>Photo 5</p>
        </div>

        <div id="arnold6">
            <a href="#"><img src=" "></a>
            <p>Photo 6</p>
        </div>


    </div> <!-- END DIV display-on -->


</section><!-- END MIDDLE SECTION -->

    backButton1.on('click', function() {
    bottomPage1.hide();
    middlePage.hide();
    arnoldPage.show();
});

Answer 1

尝试这个脚本

$(function(){

  //Default hide section
 $(".arnold-page").hide();
 $(".arnold").on("click",function()
 {
  $(".arnold-page").show()
 });

})