Question

所以我有一些字符串：

HTML

return HttpResponseRedirect(reverse('registered'))

现在我将这些div放入单独的文件中并在点击时加载它们：

getDiv1.php

return redirect('registered')

JS

<p class='navLink' id='one'> div1 </p>
<p class='navLink' id='two'> div2 </p>
<p class='navLink' id='three'> div3 </p>


<div class='container'> </div>

我正在尝试找到一种方法将所有这些包含到DOM中并在点击时显示它们。它们都显示在同一区域并占据相同的空间。我一直在玩<div class='div1' id='first'>  </div>和$( '#one').on( 'click' , function() { $( '.container').fadeOut( 'fast' , function(){ $( this).load( 'getDiv1.php' ) ; } ).delay( 500 ).fadeIn( 'slow' ) ; } ) ;，但是我无法理解这个概念。任何建议都表示赞赏。

Answer 1

您可以默认隐藏您的div，并在点击链接时显示它们。

＆＃13;

$('.navLink').on('click', function() {

  $('.hidden-div').hide();

  var div_id = $(this).attr('id');
  $("#div-" + div_id).fadeIn('slow');

});

＆＃13;

.hidden-div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class='navLink' id='one'>div1</p>
<p class='navLink' id='two'>div2</p>
<p class='navLink' id='three'>div3</p>


<div class="hidden-div" id="div-one">
  div first
  <!--some la here-->
</div>

<div class="hidden-div" id="div-two">
  div second
  <!--some la here-->
</div>

<div class="hidden-div" id="div-three">
  div third
  <!--some la here-->
</div>

＆＃13;

预加载内容并在需要时显示

1 个答案: