javascript - 使用目标 php 时防止 anchor 标记跳转到页面顶部

Question

我正在为一个学校元素开发一个网站。现在我正在研究一个显示不同 div 的 View 按钮，我已经走了很远，但发生了这件烦人的事情。 如果我单击 anchor 标记，它将显示 div，但它会将我设置在页面顶部。

我尝试使用 return false 或 e.preventdefault 使用 javascript 执行此操作，但我的 div 不会显示。

我希望有人能帮助我。

<div class="nav-referenties">
        <a href="<?php echo $_SERVER['PHP_SELF'];?>?target=Alles">ALLES</a>
        <a href="<?php echo $_SERVER['PHP_SELF'];?>?target=Websites">WEBSITES</a>
        <a href="<?php echo $_SERVER['PHP_SELF'];?>?target=Huisstijlen">HUISSTIJLEN</a>
        <a href="<?php echo $_SERVER['PHP_SELF'];?>?target=Verpakkingen">VERPAKKINGEN</a>
        <a href="<?php echo $_SERVER['PHP_SELF'];?>?target=Diversen">DIVERSEN</a>
        <hr class="onderlijn-referenties">
      </div>
      </div>
</div>

<?php


switch(@$_GET['target']) {
  case 'Alles': default :
    echo '<div class="row">
      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="arrow-left">
          <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
        </div>
        <div class="items-referenties">
          <div class="img-veld-referenties-1">
            <img src="Images/items-referenties/1.png" alt="">
          </div>
          <h1>lorem ipsum</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="items-referenties">
          <div class="img-veld-referenties-2">
            <img src="Images/items-referenties/2.png" alt="">
          </div>
          <h1>lorem ipsum</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="items-referenties">
          <div class="img-veld-referenties-1">
            <img src="Images/items-referenties/3.png" alt="">
          </div>
          <h1>lorem ipsum</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 col-xs-12">
        <div class="arrow-right">
          <i class="    fa fa-chevron-circle-right" aria-hidden="true"></i>
        </div>
        <div class="items-referenties">
          <div class="img-veld-referenties-2">
            <img src="Images/items-referenties/4.png" alt="">
          </div>
          <h1>lorem ipsum</h1>
          <hr>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
        </div>
      </div>
    </div>';

  break;

  case 'Websites':
    echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
  break;

  case 'Huisstijlen':
    echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
  break;

  case 'Verpakkingen':
    echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
  break;

  case 'Diversen':
    echo "Hier zijn nog geen items voor.<br /><br /><br /><br />";
  break;
}
?>

`

Answer 1

您不需要使用 PHP。只需使用 HTML，您就可以通过以下方式做到这一点

// Links
<div class="nav-referenties">
    <a href="#Alles">ALLES</a>
    <a href="#Websites">WEBSITES</a>
    <a href="#Huisstijlen">HUISSTIJLEN</a>
    <a href="#Verpakkingen">VERPAKKINGEN</a>
    <a href="#Diversen">DIVERSEN</a>
    <hr class="onderlijn-referenties">
</div>

// Divs
<div id="Alles"></div>
<div id="Websites"></div>
<div id="Huisstijlen"></div>
<div id="Verpakkingen"></div>
<div id="Diversen"></div>

同样，如果你想要一些动态 Action 和动画，你可以使用 Animate Scroll插件。