防止锚标签跳转到页面顶部，同时使用目标php

Question

我正在一个网站上工作的一个学校项目。现在我正在研究一个显示不同div的视图按钮，我来得相当远，但有这个令人讨厌的事情发生。 如果我点击一个锚标记，它会显示div，但它会将我设置在页面的顶部。

我试着用javascript使用return false或e.preventdefault来做它，但然后我的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。只要您可以通过以下

// 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> 

只能用HTML做到这一点再次，如果你想要一些动态动作和动画，可以使用Animate Scroll插件。