动态加载内容[关闭]

Question

I have an events website with the pages Monday to Sunday. The code used in the pages is the same. The only thing thats different is the content and the meta tags. How can I have only one webpage that loads the appropriate content when the links for monday or tuesday etc is clicked. Also will this affect the SEO? Thanks!

<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

You can have multiple divs with the content you desire, hiding and showing as you need.

in HTML

<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>

in 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;
}

in jquery

 $(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 the fiddle

Other way more elegant but complex is to have a content div, and load the content via an ajax call from jquery to the php, then clear and repopulate the div with jquery.

Hope it helps