2016-12-08 9 views
-1

で正しくは、私は一年前にこれに似た何かをした...私はこの質問を入力すると、私は私が逃した何かを明らかに見に行くが、念のためだ願っていますjqueryの

を更新していないDIVそれは別のサイトでうまくいきますし、私はコードの行に行きましたが、何らかの理由で今回は動作しません。

$(document).ready(function(){ 
 
    $("#all-insights-link").click(function(){ 
 
     $("#all-div").load("/insights-category-divs/all-categories-tab"); 
 
    }); 
 
    $("#internet-insights-link").click(function(){ 
 
     $("#internet-div").load("/insights-category-divs/internet-tab"); 
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<ul> 
 
<li><a href="#all-div" id="all-insights-link" class="-active">All Categories</a></li> 
 
<li><a href="#internet-div" id="internet-insights-link">Internet</a></li> 
 
</ul> 
 

 

 
<!-- All categories --> 
 
<div id="all-div"> 
 
       
 
all categories content to load on initial page, will disappear when "Internet" link is clicked 
 
       
 
</div><!--/#All categories --> 
 
        
 
<!-- Internet --> 
 
<div id="internet-div"> 
 
       
 
</div><!--/#Internet -->
:私はリンクをクリックしたときの挙動をする必要があります、それは代わりに、それはここで

http://www.example.com/#internet-divのように私のサイトのルートに起こっている、外部コンテンツをdiv要素をロードします私が使用していたコードですファイル拡張子がないため

+1

リクエストはデバッガで行われていますか? – Victory

+1

相対パスは、読み込んでいるページの場所ではなく、読み込みスクリプトの場所からの相対パスでなければならないことに注意しましたか? –

+1

hrefのhrefがクリックされたときにあなたのURLを変更するので、クリックハンドラの中で 'event.preventDefault()'を呼び出す必要があります –

答えて

0

アンソニーCがコメントで正解だった、私は自分のコードにevent.preventDefault()を追加し、それはそのクラスにのみappiedことを確認する必要がありました。最終的なコードは次のようになります:

$(document).ready(function(){ 
$(".-categories a").on("click", function(e) { 
    e.preventDefault(); 
}); 
$("#all-insights-link").click(function(){ 
    $("#show-content-div").load("/insights-category-divs/all-categories-tab"); 
}); 
$("#internet-insights-link").click(function(){ 
    $("#show-content-div").load("/insights-category-divs/internet-tab"); 
}); 

}); 
0

"/insights-category-divs/all-categories-tab""/insights-category-divs/all-categories-tab"は、ファイルに達しないと​​は、ファイルが必要です。それはのようなものをお読みください:

$(document).ready(function(){ 
    $("#all-insights-link").click(function(){ 
     $("#all-div").load("/insights-category-divs/all-categories-tab.html"); 
    }); 
    $("#internet-insights-link").click(function(){ 
     $("#internet-div").load("/insights-category-divs/internet-tab.php"); 
    }); 

}); 
+0

この場合、実際にはクロムネットワークのタブで200の応答を得ています。プレビューウィンドウでは、そのdivに入る正しいコンテンツが表示されていますが、これは最初に思ったもので、ファイルで試してみました拡張 – Robert

関連する問題