div改变它的位置如何防止

Question

我的问题是，当使用“a”按钮单击“vartalo”div 时，“pää”div 改变其位置并来到“vartalo”div 位置，如何防止这种情况，意味着我想要切换“vartalo” div 它不会影响其他 div 的位置。对不起我的英语

$(function() {

  $('.nappulat').on('click', function(p) {

    p.preventDefault();

    var panelid = $(this).attr('data-panelid');

    $('#' + panelid).toggle(1).html('hello')

  });

});

#memberlist_links a {
  left: 800px;
  font-size: 70px;
  position: relative;
  left: 800px;
  padding: 0px;
  color: red;
  margin: 0px;
}
.paneelinpaa {
  border: 1px solid black;
  background-color: lightblue;
  height: 200px;
  width: 200px;
  font-size: 70px;
}
.paneelinvartalo {
  border: 1px solid black;
  background-color: lightblue;
  font-size: 70px;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">

  <div class="backgroound">

    <div id="panel1" class="paneelinvartalo">vartalo

    </div>

    <div id="panel2" class="paneelinpaa">pää

    </div>

  </div>

  <div id="memberlist_links">

    <br>

    <a href="#" rel="" class="nappulat" data-panelid="panel1">A

        </a>

    <br>
    <a href="#" rel="" class="nappulat" data-panelid="panel2">B

              </a>

  </div>

</div>

Answer 1

您不能使用切换，因为它会影响display css。您需要更改可见性。

$(function() {

  $('.nappulat').on('click', function(p) {

    p.preventDefault();

    var panelid = $(this).attr('data-panelid');

    $('#' + panelid).toggleClass('hidden visible'); //toggle visibility
    $('#' + panelid).html('hello');

  });

});

.hidden{
  visibility:hidden;  //hide the visibility
}
.visible{
  visibility:visible;  //show the visibility
}
#memberlist_links a {
  left: 800px;
  font-size: 70px;
  position: relative;
  left: 800px;
  padding: 0px;
  color: red;
  margin: 0px;
}
.paneelinpaa {
  border: 1px solid black;
  background-color: lightblue;
  height: 200px;
  width: 200px;
  font-size: 70px;
}
.paneelinvartalo {
  border: 1px solid black;
  background-color: lightblue;
  font-size: 70px;
  height: 200px;
  width: 200px;
}

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">

  <div class="backgroound">
    <!--Also add visible class to toggle that-->
    <div id="panel1" class="paneelinvartalo visible">vartalo

    </div>
    <!--Also add visible class to toggle that-->
    <div id="panel2" class="paneelinpaa visible">pää

    </div>

  </div>

  <div id="memberlist_links">

    <br>

    <a href="#" rel="" class="nappulat" data-panelid="panel1">A

        </a>

    <br>
    <a href="#" rel="" class="nappulat" data-panelid="panel2">B

              </a>

  </div>

</div>

或者你可以使用它。 （第一个答案） toggle visibility of div

Answer 2

您可以将可见性设置为隐藏或可见。这样元素就可以保持它的大小和内容，但你再也看不到它了。

$(function() {
    $('.nappulat').on('click', function(p) {
        p.preventDefault();
        var panelid = $(this).attr('data-panelid');
        var cssVisilibty = $('#' + panelid).css('visibility') == 'hidden' ? 'visible' : 'hidden';
        $('#' + panelid).css('visibility', cssVisilibty).html('hello');
    });
});

See it in action

注意：点击的div的内容会因为.html('hello')而改变

您还可以通过将$('#' + panelid) 替换为$panel 并替换该行来进行一些优化

var panelid = $(this).attr('data-panelid');

通过

var $panel = $('#' + $(this).attr('data-panelid'))