0

我希望有按钮在单击时显示 div 并在单击外部时隐藏。（页面上的任何地方）下面的代码不起作用——我不确定，为什么？

我正在努力;

<div class="side_button" id="side_button2">
TEXT 1
</div>

<div class="side_button" id="side_button3">
TEXT 2
</div>

CSS

#page_button2 {
    display: none;
    position: absolute;
    height: 300px;
    width: 400px;
    border: 1px dotted red;
    z-index: 999;
}

#page_button3 {
    display: none;
    position: absolute;
    height: 300px;
    width: 400px;
    border: 1px dotted red;
    z-index: 999;
}

.side_button { 
    height: 60px;
    border-bottom: 1px solid #333;
    color: #333;
    font-family: "KlavikaBasic-Bold";


    background-image: linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -o-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -moz-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -webkit-linear-gradient(bottom, #e5edda 6%, #fff 100%);
    background-image: -ms-linear-gradient(bottom, #e5edda 6%, #fff 100%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.06, #dce6cc),
    color-stop(1, #fff)
   );


}

JS

<script>

// Click to View Page
$(document).ready(function(){

$('#side_button2').click(function() {
    $('#page_button2').show();
    $('#page_button3').hide();
});

$('#side_button3').click(function() {
    $('#page_button3').show();
    $('#page_button2').hide();
});
// 

</script>

HTML

<!-- Show / Hide Div Side BTN -->

<div id="page_button2">
Test 1.
</div>

<div id="page_button3">
Test 2.
</div>

<!-- // Show / Hide Div Side BTN -->
4

1 回答 1

1

正如我在评论中所说，您似乎缺少});关闭$(document).ready(. 没有它，您可能会遇到语法错误

尝试这个：

$(document).ready(function(){

    $('#side_button2').click(function() {
        $('#page_button2').show();
        $('#page_button3').hide();
    });

    $('#side_button3').click(function() {
        $('#page_button3').show();
        $('#page_button2').hide();
    });

});
于 2013-02-06T19:09:56.780 回答