javascript - 创建显示新 div 的 div 样式

Question

我想做一个

<a href=#divstyle> CLICK HERE </a>

当按下 href 时，我想显示新页面，而不刷新。

新页面 = 新文本，新布局，就像新页面一样，但代码相同，背景相同。

如何实现？

我想做的事情的图片:

首先，初始代码:https://i.imgur.com/tFO8JgK.png “按下全局统计”时的第二个代码 https://i.imgur.com/UKQgyXJ.png

第二个代码将显示相同的布局，但我写了新文本，

我希望“全局统计”像“下一步按钮”一样

$(document).ready(function() {
  var pages = $('#container p'),
    current = 0;
  var currentPage, nextPage;

  $('#container .button').click(function() {
    currentPage = pages.eq(current);
    if ($(this).hasClass('prevButton')) {

      if (current <= 0)
        current = pages.length - 1;
      else
        current = current - 1;
    } else {
      if (current >= pages.length - 1)
        current = 0;
      else
        current = current + 1;
    }
    nextPage = pages.eq(current);
    pages.hide();
    nextPage.show();
  }).filter('.nextButton').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="colw_3 spec-l border-right">
    <p></p>
    <p><strong><em><font color="white">Nickname</font></em></strong><br>
    </p>
    <p><strong><em><font color="white">Headshoturi</font></em></strong><br>
    </p>
    <p><strong><em><font color="white">Banditi&nbsp;Ucisi</font></em></strong><br>
    </p>
    <p><strong><em><font color="white">Ucideri</font></em></strong><br>
    </p>
    <p><strong><em><font color="white">Rucsac</font></em></strong><br>
    </p>
    <p><em><strong><font color="white">Sloturi&nbsp;folosite la&nbsp;rucsac</font></strong></em><br>
    </p>
  </div>
  <!-- END col_6 -->

  <div class="colw_3 paddbott100 spec-r">
    <p></p>
    <p><strong><font color="white"><?php echo $Username ?></font></strong><br>
    </p>
    <p><strong><font color="white"><?php echo $Headshots ?></font></strong><br>
    </p>
    <p><strong><font color="white"><?php echo $BanditsKilled ?></font></strong><br>
    </p>
    <p><strong><font color="white"><?php echo $Murders ?></font></strong><br>
    </p>
    <p><strong><font color="white"><?php echo $Backpack ?></font></strong><br>
    </p>
    <p><strong><font color="white"><?php echo $BackpackSlotsUsed ?></font></strong><br>
    </p>
  </div>
</div>

这可能吗？我想尝试什么。我需要添加新的 <div class="colw_3 spec->因为，这是我要添加的“第二个”页面。

Answer 1

用容器 div 包裹每个部分:

#containerone {
    display:block;
}

#containertwo {
    display:none;
}

然后创建一个 javascript 函数，将第一个容器更改为 display:none;第二个显示: block ； - 并将其分配给事件监听器。

希望对您有所帮助!