ajaxカスタムディビジョンへの内部リンクの読み込み

"navMenu"クラスのリンクをリンクして、 "main"というIDのdivにロードするカスタムjquery/ajaxスクリプトを作成しました。私は、その重要なCSSとJavaScriptとjQueryファイルの残りの部分をインデックスページヘッダーにjsを添付しました。リンクされたすべてのページがファイルを使用します。これで私のウェブサイトのメインロードページの設計と構築が完了しました。私が作成したボタンリンクは、私のajaxスクリプトで指定されたdivにロードされません。すべてのページのすべてのリンクを "main"というIDで指定されたdivにロードするにはどうすればよいですか？私はメニューでこれを達成しました。それは完璧に動作しますが、ロードされたページ（home.php）内のボタンリンクをクリックするとdivで開かず、ページがサーバー上にないことが示されます。ajaxカスタムディビジョンへの内部リンクの読み込み

$(document).ready(function() { 
    $('#main').load('pages/home.php'); 

    $('.navMenu').click(function() { 
     var page = $(this).attr('href'); 
     $('#main').load('pages/' + page + '.php'); 
     return false; 
    }); 
`  `});

は、相続人のインデックスページには、モックアップ：：

<html> 
<head> 
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108738796-1"></script> 
<script> 
    window.dataLayer = window.dataLayer || []; 
    function gtag(){dataLayer.push(arguments);} 
    gtag('js', new Date()); 

    gtag('config', 'UA-108738796-1'); 
</script> 

<title> ILLUMONOPOLY </title> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<link rel="shortcut icon" href="img/favicon1.png" type="image/x-icon"> 

<link rel="manifest" href="/manifest.json"> 
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script> 
    <script> 
    var OneSignal = window.OneSignal || []; 
    OneSignal.push(["init", { 
     appId: "14306e53-45e7-443c-a414-894b84cbac7d", 
     autoRegister: false, 
     notifyButton: { 
     enable: true /* Set to false to hide */ 
     } 
    }]); 
    </script> 
<style> 
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 

*, *:before, *:after { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html, body { 
    height: 100vh; 
} 

body { 
    font: 600 12px/1 'Open Sans', sans-serif; 
    color: #333; 
    background: #666666; 
    overflow-x: hidden; 
} 

.wrapper { 
    display: flex; 
    min-height: 100%; 
} 

.sidebar { 
    position: absolute; 
    width: 220px; 
} 

.content { 
    background: #666666; 
    transform: translate3d(0,0,0); 
    transition: transform .3s; 
} 

.content.isOpen { 
    transform: translate3d(220px,0,0); 
} 

.button { 
    cursor: pointer; 
} 

.button:before { 
    content: '\f00a'; 
    font: 22px fontawesome; 
} 

/* Demo Navigation */ 

.title { 
    font-size: 16px; 
    text-align: center; 
    line-height: 28px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #eee; 
    border-bottom: 1px solid #222; 
    background: #2a2a2a; 
} 




</style> 
<style> 

nav2 { 
    height:28px!important; 
    align-items: center; 
} 

ul{ list-style-type: none;} 

@font-face { 
    font-family: 'steelfish'; 
    src: url('fonts/steelfish.ttf'); 
    font-weight: 200; 
} 

@font-face { 
    font-family: 'Incognito'; 
    src: url('fonts/Incognito.ttf'); 
    font-weight: 100; 
} 

@font-face { 
    font-family: 'round'; 
    src: url('fonts/Round.ttf'); 
    font-weight: 100; 

} 

body{ 
    font-family: steelfish !important; 
    color: white; !important; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    font-size: 17px!Important; 
} 

h1{ 
    font-family: Incognito !important; 
    color: white; !important; 
} 

h2{ 
    font-family: round !important; 
    color: white; !important; 
    font-size: 85% !important; 
} 

.box { border-radius:8px; 
border-style: solid; 
border-color: #ffffff; 
border-width: 2px; 
background-color:rgba(0, 0, 0, 0.75); 
background-attachment: fixed; 
} 

.contentX { 
    background-image: url("img/bgr.jpg"); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#main { 
    width:100%; 
    height:93%;  
    overflow:auto !important; 
    overflow-x:hidden !important; 

.scrollbox { 
    overflow-y: scroll !important; 
    overflow-x: hidden; 


} 

} 
::-webkit-scrollbar { 
    width: 8px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 2px rgba(255,250,250,.9); 
    border-radius: 6px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    background-color: rgba(212,175,55,0.8); 
} 

</style> 

<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css"> 
<script 
    src="https://code.jquery.com/jquery-1.12.4.min.js" 
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
    crossorigin="anonymous"></script> 
<script src="js/jquery-ui.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/lity.js"></script> 
<script src="js/ajax.js"></script> 
<script src="js/ajaxlinks.js"></script> 
<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" data-api-key="ZjM1NDE3NDUtZmZhMS00ODA3LWE3ZGUtYzk0MWYwNzRmYjIxNjM2NDQ0NzA2MzQ3Njg0NDY0" id="snipcart"></script> 
<link href="https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css" rel="stylesheet" type="text/css" /> 
<link href="css/lity.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="css/menu_cornermorph.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 

<script src="//connect.soundcloud.com/sdk/sdk-3.1.2.js" type="text/javascript"></script> 
<script src="js/jquery.fullwidthaudioplayer.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function() { 
    $('.button').on('click', function() { 
    $('.content').toggleClass('isOpen'); 
    }); 
}); 
</script> 

</head> 


<body> 

<div class="wrapper"> 
    <div class="sidebar"> 
    <div class="title"> 
    <center><img src="img/logo.png" class="img-fluid" height="150" width="150"><h1>Menu</h1></center> 
    </div> 
        <div class="link-list container-fluid"> 
         <center> 
         <div class="row"> 
          <button type="button" class="btn btn-secondary snipcart-user-profile col-6" style="background-color:#DAA520"><span class="snipcart-user-email">Login</span></button> 
          <button type="button" class="btn btn-secondary col-6" style="background-color:#DAA520"><span class="snipcart-user-logout">LogOut</span></button> 
         </div> 

         <ul id="navMenu"><h2> 
         <li><a href="home" class="navMenu"><span>Home</span></a></li> 
         <li><a href="artist" class="navMenu"><span>Talent</span></a></li> 
         <li><a href="services" class="navMenu"><span>Services</span></a></li> 
         <li><a href="music" class="navMenu"><span>Music</span></a></li> 
         <li><a href="shop" class="navMenu"><span>Beats</span></a></li> 
         <li><a href="media" class="navMenu"><span>Videos</span></a></li> 
         <li><a href="media" class="navMenu"><span>Portfolio</span></a></li> 
         <li><a href="contact" class="navMenu"><span>Contact Us</span></a></li> 
         </ul></h2> 
         <br> 
         FOLLOW US 
         </center> 
        </div> 
    </div> 
    <div class="content isOpen"> 
    <div class="XcontentX"> 
     <nav class="navbar navbar-dark nav2" style="background-color:#202020"> 
      <a class="navbar-brand button" href="#"></a> 
     <button type="button" class="badge badge-warning snipcart-checkout" style="background-color:#DAA520"><img src="img/cart.png" height="25" width="25">:<span class="snipcart-total-price"></span></span></button> 
     </nav> 
     <div id="main"></div> 





    </div> 
</div> 
</div> 


<nav class="navbar fixed-bottom" style="background-color:#202020"> 
      <div id="fap"></div> 
     </nav> 
     <script> 
$(document).ready(function(){ 
    $('#fap').fullwidthAudioPlayer({wrapperColor: '#202020', fillColor: '#ffffff'}); 
}); 
</script> 
</body> 

</html>

相続人はHTMLが自宅からモックアップここhttps://www.trillumonopoly.com

マイAjaxのコードであるウェブサイトへの相続人ライブリンクを助けてください.php（divの最初の読み込みページ）

<html> 
<head> 
<title>Home</title> 


<script src="js/better-simple-slideshow.min.js"></script> 
<style> 
.mixingservice { 
    background : url("img/parallaxstudio.jpg") repeat fixed 100%; 
    background-size: cover; 

} 
.general { 
    background : url("img/parallaxmain1.jpg") repeat fixed 80% !Important; 
    background-size: cover; 

} 
.distribution { 
    background : url("img/parallaxdistribution.jpg") repeat fixed 80% !Important; 
    background-size: cover; 

} 
.webdesign { 
    background : url("img/webservice.jpg") repeat fixed 80% !Important; 
    background-size: cover; 

} 
.featuredmusic { 
    background : url("img/featured.jpg") repeat fixed 80% !Important; 
    background-size: cover; 

} 

</style> 
</head> 
<body> 
<!-- Promo Banners --> 
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" height="400px"> 
     <ol class="carousel-indicators"> 
     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
     </ol> 
     <div class="carousel-inner" role="listbox"> 
     <div class="carousel-item active"> 
      <img class="img-fluid " src="img/banner101.jpg" height="590px" alt="First slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="img-fluid" src="img/digigodbanner.jpg" height="590px" alt="DigiGod slide"> 
     </div> 
     <div class="carousel-item"> 
      <img class="img-fluid" src="img/banner2.jpg" height="590px" alt="Second slide"> 
     </div> 
     </div> 
     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
</div> 
<center> 
<!-- Service Banners --> 

<div class="general row"> 
    <div class="col-lg-6 col-sm-12"> 
     <img src="img/logo.png" class="img-fluid" height="420" width="420"> 
    </div> 
    <div class="col-lg-6 col-sm-12"> 
    <h1> <font color="white">ILLUMONOPOLY</font></h1><hr style="background-color:#ffffff"> 
     <div class="box"><br> <font size="6vh"> 
      Welcome to the official website of ILLUMONOPOLY. The Digital Media cartel. Providing independent businesses and musicians with marketable web media solutions to expand there brands for over 10 years. 
      Its Not what can we do for you. Its more of what cant we do for you. With our dedicated team and staff we can help you evolve your brand to the next level. Let Us Expand Your Brand, Your Sound, Your Visual Production, Your fanbase, Your Social media & web presence.<br><B>LET US HELP YOU EXPAND YOUR BRAND!!!!</b> 
      </font> 
     </div> 

    </div> 
</div> 

     <div class="featuredmusic row"> 

        <div class="col-lg-3 col-sm-6 box"> 
         Featured album cover #2 <hr style="background-color:#ffffff">Bunch of fucckin bullshit that goes heremore bullshit and bullshit<br>Button 
        </div> 
        <div class="col-lg-3 col-sm-6 box"> 
         Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button 
        </div> 
        <div class="col-lg-3 col-sm-6 box"> 
         Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button 
        </div> 
        <div class="col-lg-3 col-sm-6 box"> 
         Featured album cover #2 <hr style="background-color:#ffffff"><br>Bunch of fucckin bullshit that goes here<br>more bullshit and bullshit<br>Button 
        </div> 

     </div> 
     <div class="mixingservice row"> 
      <div class="col-6"> 

      </div> 
      <div class="col-6"> 
       <img src="img/mixservice.png" class="img-fluid"> 
        <br> 
       <H1>CLIENTS</H1><hr style="background-color:#ffffff"> 
       <font size="6vh">Tory Lanes, Ron Browz, 2 Chainz, J-Hard 360, Dezzy Chamberland, Sig Music, ZaeTheGodd and more....<br> 
         </font><br> 


         <a href="services" class="navMenu"><button type="button" class="btn btn-danger btn-lg" style="background-color:"red" >Order Now</button></a> 

         <br><br> 
      </div> 
     </div>  
     <div class="general row"> 
      <div class="container-fluid"> 
       <center><br><br> 
         <h1><img src="img/logo.png" class="img-fluid" height="100" width="100"> expanding brands for the Last decade</h1> 
         <br><br> 
       </center> 
      </div> 
     </div> 
     <div class="distribution row"> 
      <div class="col-6"> 
       <img class="img-fluid" src="img/iphone.png" height="500" width="360"> 
      </div> 
      <div class="col-6" style="padding-top: 30px; padding-bottom: 30px;"> 
        <img src="img/distrotext2.png" class="img-fluid"> 
        <br> 
        <img src="img/streams.png" class="img-fluid"> 
        <br><br><a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#000000">Sign Up</button></a> 
        <br><br> 
      </div> 
     </div> 

     <div class="webdesign row"><br><br><Br> 
       <div class="col-lg-6 col-sm-12"> 
         <img src="img/mactop.png"> 
       </div> 
       <div class="col-lg-6 col-sm-12"><br><Br><Br> 
       <div class="container-fluid box"> 
         <font color="red" size="5vh"><h2>Web & Application Developement </h2><br></font> 

         <h2>Are You In Need of a Website? And or an Mobile Application? <br> 
         Our Team of developers can get your brand up and running and designed to your specifications in just a week. 
         Inquire via email for questions and quotes for custom designs and scripts, websites and applications. 
         <br>No JOB TOO BIG NO JOB TOO SMALL. LET US EXPAND YOUR BRAND!!!!!<br></h2><br><br> 
         <a href="services" class="navMenu"><button type="button" class="btn btn-primary btn-lg" style="background-color:#666666">Inquire Now</button></a> 
        </div> 
       </div>  


     </div> 
<h1>Testing this here</h1> 

<!-- Google Ads & Scripts --> 
<br><br> 
<br> 
<br> 

      <br><br> 
      <div class="row"style="background-color:#202020"> 

      <div class="col-4"></div> 
      <div class="col-4"></div> 
      <div class="col-4"></div> 
      </div> 
<br><Br><br> 
&copy; ILLUMONOPOLY LLC. ALL RIGHTS RESERVED. 
<br><br><Br> 
</center> 
</body> 
</html>

出典

2017-10-28 DigiGod Hymself

Y内部のhrefを持つすべてのボタンに対してこれを委譲する必要があります。別の関数をロードする例：

$(document).ready(function() { 
    loadMainContent('home'); 

    $('body').delegate('.yourInternalLinks', 'click', function (event) { 
     event.preventDefault(); 
     loadMainContent($(this).attr('href')); 
    }); 
}); 

function loadMainContent(page) { 
    $('#main').load('pages/' + page + '.php'); 
}

これで、他のページのリンクに「yourInternalLinks」クラスを追加する必要があります。デリゲートでは、他のページから動的にロードされる新しいボタンでも機能します。

出典

2017-10-28 17:24:48

これは私にとっては役に立たなかった。私はまだ別のページにリダイレクトされました。 "リクエストされたURL /サービスはこのサーバー上に見つかりませんでした。" @lukasz tkacs –

@DigiGodHymself申し訳ありませんが、preventDefaultについて忘れました:)更新されたコードを確認してください –

これは間違いなく働いています。どうもありがとうございます。私の進歩は、私のウェブサイトを偉大なものにしていきます.... @lukasz Tkacz –

ajaxカスタムディビジョンへの内部リンクの読み込み

答えて

関連する問題