2016-07-26 231 views
0

我有一個活動網站,週一到週日的網頁。頁面中使用的代碼是相同的。唯一不同的是內容和元標籤。點擊星期一或星期二等鏈接時,如何只有一個網頁加載適當的內容。這也會影響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> 
+1

有太多可能的答案或者對這種格式太好的答案太長。請添加詳細信息以縮小答案集或隔離可以在幾個段落中回答的問題。我建議您找到一個開發論壇(可能是[Quora](http://www.quora.com/Computer-Programming) ?)來計算一般性。然後,當/如果您有特定的編碼問題,請回到StackOverflow,我們很樂意提供幫助。 –

回答

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

其他方式更優雅,但複雜的是有一個共同ntent div,並通過從jquery到php的ajax調用加載內容,然後使用jquery清除並重新填充div。

希望它有幫助