Question

我想做一个

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

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

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

如何实现这一目标？

我要做的事情的图像：

首先，初始代码：https://i.imgur.com/tFO8JgK.png 按下“Glabal Statistics”时的第二个代码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;第二个显示：块; - 并将其分配给事件监听器。

希望有所帮助！

创建一个显示新div的div样式

1 个答案: