div 改变它的位置如何防止

Question

我的问题是当用 'a' 按钮点击 'vartalo' div 然后 'pää' div 改变它的位置并进入 'vartalo' divs 的位置，如何防止，意思是我希望当我切换'vartalo' div 它不会影响其他 divs 的位置。对不起我的英语

$(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'))

div 改变它的位置如何防止

div changing its place how to prevent that

jquery

button

toggle