別の部門のナビゲーションからdivのコンテンツを変更してください

Question

SO gurus！

私はJavaScript、JQuery、AJAX、およびこれらのすべてを本当に新しくしていると言いたいので、私がすでに検索した回答を理解していないかもしれません。この場合、私が本当に探しているのは、単にそれを取得していないだけなので、馬鹿レベルを完了するためにそれを愚かにする人です。

H'okay。私はをにしようとすると、自分のナビゲーションバーのリンクをクリックするたびにサイトの訪問者がページをリロードするのを防ぐことができます。私のナビゲーション内のリンクdivは私のメイン<div>の内容を置き換えたいと思うし、自分の「更新」（ブログのようなものではなく、ブログではない）を持っているXMLファイルに私の "ホームページ" 。ここで

は私のページのコードです：

<div class="nav"> 
    <h1>navigation</h1> 
     <ul> 
     <!-- I want these links' content...--> 
      <li><a href="#">Home Page(this one is to be an XML)</a></li> 
      <li><a href="#">Test Link 1</a></li> 
      <li><a href="#">Test Link 2</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
</div> 

<div class="main"> 
<!--... to show here! --> 
    <p>Bloop! New stuff here.</p> 
</div> 

誰かが、英語で私にこれを説明してくださいしてくださいことはできますか？私はそれを理解することができないので、1時間泣いている。

Answer 1

私はこれを正しく理解すれば、ユーザーがリンクをクリックするたびにそう、あなたが何をしたいのか...、「メイン」のクラス名で（DIVの内容を変更する？

私がいた場合純粋なjavascriptの（ノーフレームワーク）でこれを行うために...私はどうなる次

<ul> 
    <!-- I want these links' content...--> 
     <li id="home-nav"> <a href="#">Home Page(this one is to be an XML)</a></li> 
     <li id="test1-nav"> <a href="#">Test Link 1</a></li> 
     <li id="test2-nav"> <a href="#">Test Link 2</a></li> 
     <li id="contact-nav"> <a href="#">Contact</a></li> 
    </ul> 

次に、あなたがストリップ先に行くことができます。

ナビゲーションに続いてIDをリスト項目を割り当てアンカータグを外して、あなたはそれをナビゲートするためにonclick関数を追加したいと思うでしょうems。

<ul> 
    <!-- I want these links' content...--> 
     <li id="home-nav" 
      onclick="navigate('home-nav')"> 
      Home Page(this one is to be an XML)</li> 
    </ul> 

私は「ホーム-NAV」のIDを追加し、私は、パラメータとして「ホーム-NAV」を渡し、ナビゲートのonclickの機能を追加する方法に注意してください。次に、javascriptで関数を記述する必要があります。

function navigate(link){ 
    //Set the link to active 
    document.getElementById(link).classList += "active"; 

//Change data in the main div 
var main = document.getElementsById('main'); 
main.innerHTML = "<p>Whatever you want the HTML to be.</p> 
} 

最後に、代わりに「メイン」クラスを使用しての...それのid作る...上記のコードは、しかし、それはあなたが始めるでしょう、あなたが解決する必要がありますいくつかの不具合を紹介します。それが役に立てば幸い。

https://www.youtube.com/playlist?list=PL-4zzaVqc2ajx1dwggBv04D1ns9JBrosv

Answer 2

使用jQueryの.remove（）と：あなたはJavascriptの基礎を学ぶために必要がある場合

また、私は最近、ここにある、JSの基礎を教えて符号系列をしました。 append（）。見て：

<ul>   
     <li><a id="link1" href="#">Test Link 1</a></li> 
     <li><a id="link2" href="#">Test Link 2</a></li>    
    </ul> 

のjQuery：

$("#link1").click(function(){ 
    $(".main").children().remove(); 
    $(".main").append("<p>Link 1 Stuff !</p>"); 
}) 
$("#link2").click(function(){ 
    $(".main").children().remove(); 
    $(".main").append("<p>Link 2 Stuff !</p>"); 
})