jquery - 如何仅通过单击特定 div 来处理 div 的可见性

Question

我有 4 个 div，所有 div 都由图像组成。所有div的位置就像左上div，右上div，左下div和右下div。我还有一个 div，位于中央的面板控件中，默认情况下将禁用。

当我点击任何一个 div(左上 div、右上 div、左下 div 和右下 div)时，所有这四个 div 都应该被禁用并且可见性应该是 false。

我们点击的 div 应该显示在面板的中心 div 中。

是否可以通过点击div来执行。

还有一件事我没有任何按钮控件。

我只想通过单击 div 来处理所有这些。

代码

     <div class="img_top" style="margin-top: 40%">
                    <div class="img_top_left">
                        dgsdfg</div>
                    <div class="img_top_right">
                        dfgdsfg</div>
                </div>
                <div class="img_bottom" style="margin-top: 60%">
                    <div class="img_bottom_left">
                        dgsdfg</div>
                    <div class="img_bottom_right">
                        dfgdsfg</div>
                </div>

            <asp:Panel ID="Panel1" runat="server">
                <div class="img_center">
                </div>
            </asp:Panel>

CSS

.img_center
{
    margin-top:50%;
     height:250px;
     background-color:Green;
}
.img_top_left
{
    height:250px;
    width:40%;
    float:left;
    background-color:Blue;
}
.img_bottom_right
{
     height:250px;
    margin-left:20%;
    width:40%;
    float:left;
    background-color:Orange;
}
.img_bottom_left
{
    height:250px;
    width:40%;
    float:left;
    background-color:Blue;
}
.img_top_right
{
     height:250px;
    margin-left:20%;
    width:40%;
    float:left;
    background-color:Orange;
}

Answer 1

如果你使用 Jquery，你可以做这样的事情

    $(document).ready(function() {
        $('#toprightcenter').hide();
            $('#topleftcenter').hide();
            $('#bottomrightcenter').hide();
            $('#bottomleftcenter').hide();

$(window).load(function() {
    $('#topright').click(function() {
            $('#topright').hide();
            $('#topleft').hide();
            $('#bottomright').hide();
            $('#bottomleft').hide();
            $('#toprightcenter').toggle();
 return false;
});

这应该在页面加载时隐藏中央 div，然后在单击右上角的 div 时隐藏其他 div，并且应该显示 toprightcenter div。

为此，您显然必须制作一些中心 div 来保存所有四个 Angular 的内容，并将其命名为#toprightcenter，然后再命名为#topleftcenter 等。

然后重复上面的功能，在顶部的点击功能区域将 topright 换成 topleft 等等，直到您为所需的每个事件序列都有一个代码块。

希望对您有所帮助或助您一臂之力。