私はサイトで働いている学校プロジェクトのターゲット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プラグインを使用することができます。