javascript - URL を読み込んでページをリロードせずにリンクをクリックして、列の内容を変更する

Question

私は現在ワードプレスで作業しており、3 つの列で SPA を作成しています。左と中央の列は静的で、右の列は最初の 2 つの列のリンクに基づいて動的です。今、私は解決策を持っています.position:absolutとvisibility:hiddenで正しい列にすべての特定のものをロードします。しかし、私のウェブページを携帯電話で試してみると、動作が少し遅くなります。私のコードは次のようになります。

<div class="content"> <!-- open class="content"-->
 <script> //script for URL-Change by clicking on Link   !Start
           function showDetailContent(showid) {                                    
                var id = document.getElementsByClassName('shown');                   
                for (var i=0;i<id.length;i++) {                       
                    id[i].classList.remove('shown');
                };                    
                document.getElementById("right_" + showid).classList.add('shown');
                    };
           Path.map("#/?p=<?php the_id();?>").to(function () {   
                showDetailContent(<?php the_id();?>);
           });
           Path.listen();
       </script> <!--script for URL-Change by clicking on link    !Start-->
 <div class="col"><!-- Start col (left)-->
    <?php while(have_posts()):the_post();?> <!-- Start while (left)-->
            <?php if (in_category('infotext')):?> <!--start if-request for category-->                  
                   <div class="infotext  animated bounceSwitch">  <!--start infotext and animation-->
                       <h1>
                            <a href="#/?p=<?php the_id();?>"> <?php the_title();?> </a> <!-- h1 of col(left)-->
                        </h1>
                        <?php the_content(__(''));?>    <!-- get the post-content in it -->
                         </div>  <!-- close infotext and animation-->
                    <form> <!-- start form login-->
                            <input id="user" class="bg-whitesmoke" type="text" placeholder="Benutzername" />
                            <input id="pass" class="bg-whitesmoke" type="password" placeholder="Passwort" />
                            <input id="submit" class="bg-grey" type="submit" value="Anmelden" />    
                    </form> <!-- end form login-->
                       <?php endif;?>  <!-- end if-request for category-->


<?php endwhile;?> 
      </div>   <!-- end col(left) -->
 <div class="col">   <!-- Start col (mid)-->
    <?php while(have_posts()):the_post();?><!-- Start while (mid)-->
        <?php if (in_category('apps')):?><!-- start if request for category-->                                  
                <div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey"> 
                    <h1>
                        <a href="#/?p=<?php the_id();?>"> <?php the_title();?> </a> <!-- h1 for col(mid-->
                    </h1>
                    <?php the_content(__(''));?>   <!-- get post content-->
                </div> 
        <?php endif;?>     <!-- end if request for category-->                                                                                

<?php endwhile;?> <!-- End while(mid)-->
 </div><!-- End col (mid)-->
<div class="col animated bounceInRight">
    <?php while(have_posts()):the_post();?>
        <div class="content-right">
            <div id="right_<?php the_id();?>" class="right">
                <div id="products-wrapper" class="products-wrapper round-borders-panel  bg-brightgrey">
                    <div id="product-01" class="product-preview"> <!-- start div-->
                        <div id="product-title" class="product-image product-title"><!-- get titel and image-->
                            <img src="./img/products/logos/logo-cloudshare.png" /><!-- get logo-->
                            <h1><?php the_title();?></h1><!-- h1 for col(right)-->
                        </div><!--end product-image-->
                        <?php the_content(__(''));?><!-- get post content-->
                    </div><!-- start product-01-->
                </div><!-- end product-wrapper products-wrapper round-borders-panal bg-bright-grey-->
            </div><!-- end class right-->
        </div><!-- end content-right-->

    <?php endwhile;?><!-- end while(right)-->
</div> <!-- close col(right)-->

--> では、リンクをクリックした直後にコンテンツを作成し、別のリンクがクリックされた場合にそれを削除する機会はありますか? それとも、これが本当に最善の解決策ですか？良い一日を、ヤニック:)。