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代替ASP.NET

试试这个：

$('div').click(function () { // all divs
  $('div').hide(); // hide all the divs
  var divId = $(this).attr('id'); // get the id of the div
  /* use the css properties to position it at the center, for example */
  $(this).css({
    'margin', '10px' /* add more as required */
  });
}

您可以使用CSS属性更改元素的位置，所有其他元素仍然存在！所以，你需要使用：

#div {
  position: absolute;
}

通过这种方式，您可以更改元素相对于其他元素的位置。您也可以使用.css()方法通过jQuery添加此属性。

Answer 2

如果你使用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来保存所有四个角落的内容，并将其命名为#toprightcenter，然后将其命名为#topleftcenter等。

然后重复上面的功能，在顶部的点击功能区域中交换顶部以进行顶部，依此类推，直到您为所需的每个事件序列都有一个代码块。

希望有助于或帮助你。

Answer 3

假设你的div有id's

$('div').click(function(){
    var thisId = $(this).attr('id')
    if(thisId == 'topleft' || thisId == 'topright' || thisId == 'bottomleft' || thisId == 'bottomright') {
        $(this).hide()
        $('#centrediv').html('<p>' + thisId + '</p>')
    };
});

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

3 个答案: