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

})

Answer 2

您可以通过将display属性设置为none来实现结果，并在单击按钮时将display属性更改为block或inline。

<!--Jquery -->

 $(document).ready(function(){
   $(".arnold-page").css("display","none");
    $(".arnold").click(function(){
     $(".arnold-page").css("display","block");
    });
 });

使用点击事件制作部分节目

2 个答案: