内容を動的に読み込みます

Question

私は月曜日から日曜日のページを持つイベントウェブサイトを持っています。このページで使用されるコードは同じです。それ以外の唯一のものはコンテンツとメタタグです。月曜日や火曜日などのリンクがクリックされたときに、適切なコンテンツを読み込むWebページを1つだけ作成するにはどうすればよいですか。これはSEOにも影響しますか？ありがとう！

<nav class="menu"> 
    <ul> 
     <a href=""><li>Monday</li></a> 
     <a href=""><li>Tuesday</li></a> 
     <a href=""><li>Wedneday</li></a> 
     <a href=""><li>Thursday</li></a> 
     <a href=""><li>Friday</li></a> 
     <a href=""><li>Saturday</li></a> 
     <a href=""><li>Sunday</li></a> 
    </ul> 
</nav> 

<div class="content"> 
    <div class="article"><!--the days content--></div> 
    <div class="article"><!--the days content--></div> 
    <div class="article"><!--the days content--></div> 
</div> 

Answer 1

必要に応じて隠して表示するコンテンツを複数のdivに含めることができます。 jqueryの中にHTML、CSS

#container { 
    width:100%; 
    height: 100px; 
    background-color: green; 
    text-align: center; 
} 

#red { 
    width:100%; 
    height: 100%; 
    background-color: red; 
} 

#blue{ 
    width:100%; 
    height: 100%; 
    background-color: blue; 
    display: none; 
} 

で

<div id="container"> 
    <button id="btnChange">Change Content</button> 
    <div id="red"> 
    This is red content 
    </div> 
    <div id="blue"> 
    This is blue content 
    </div> 

で

は

$(document).ready(function() { 
       var content = "red"; 
     $("#btnChange").click(
      function() { 
       if(content == "red"){ 
        $("#red").hide(); 
        $("#blue").show(); 
        content = "blue"; 
       }else if (content == "blue"){ 
        $("#blue").hide(); 
        $("#red").show(); 
        content = "red"; 
       } 
      }    
     ); 
    }); 

HERESに、よりエレガントが、複雑なfiddle

他の方法は、共同を持っていることですntent divを作成し、jQueryからphpへのajax呼び出しでコンテンツをロードし、jqueryでdivをクリアして再投入します。

希望する