Question

我有一个活动网站，其中包含周一至周日的页面。页面中使用的代码是相同的。唯一不同的是内容和元标记。当点击星期一或星期二等链接时，如何只有一个加载相应内容的网页。这会影响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，并根据需要隐藏和显示。

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>

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

在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";
                }
            }            
        );
    });

继承人fiddle

其他方式更优雅但更复杂的是拥有内容div，并通过从jquery到php的ajax调用加载内容，然后使用jquery清除并重新填充div。

希望有所帮助

动态加载内容

1 个答案: