加載頁面內容時，點擊

希望有人能幫助我這個問題，我已創建了，解釋了代碼的jsfiddle什麼IM需要加載頁面內容時，點擊

http://jsfiddle.net/pnL1d663/3/

我有創建一個帶有6個鏈接的Header，Nav菜單的一些基本代碼，主菜單和右側欄，

我期望實現的是，當用戶單擊導航菜單上的6個頁面鏈接之一即點擊page4.html），

來自該頁面鏈接被點擊的內容（即， page4.html）被加載到主div而沒有頁面的其餘部分（即Header，Nav，RightSidebar），完全可以刷新。

該div應保持表示內容（即Page4.html），直到用戶點擊另一個鏈路（即page6.html）

然後只在主DIV含量應該從（即第4頁改變.HTML頁面6.html）沒有任何其他的內容重新加載/刷新頁面

上 -

希望我已經能夠使它足夠清楚的什麼IM需要做。

謝謝。

代碼：

<body> 
    <div class="container"> 
     <div class="header">Site name</div> 
     <div class="nav"> 
      <ul> 
       <li><a href="#">Page1.html</a> 

       </li> 
       <li><a href="#">Page2.html</a> 
      </li> 
      <li><a href="#">Page3.html</a> 

      </li> 
      <li><a href="#">Page4.html</a> 

      </li> 
      <li><a href="#">Page5.html</a> 

      </li> 
      <li><a href="#">Page6.html</a> 

      </li> 
     </ul> 
    </div> 
    <div class="main">This is the Main Div that will load either page1.html -> page6.html depending on which Nav link the user clicks.. Note that when user clicks the nav link.. Only this div should reload with the content of said clicked page. i.e. If user clicks page4.html link in nva menu. This lightblue div will change from whats written here now and load the content from page4.html in this div but the header, Nav, and rightsidebar of the page will stay static and not refresh at all.</div> 
    <div class="rightsidebar">blah blah blah blah blah</div> 
</div>

CSS：

.header { 
    text-align:center; 
    width: 100%; 
    height: 90px; 
} 
.nav { 
    float:left; 
    width:20%; 
    height: 500px; 
    background:grey; 
} 
.main { 
    float:left; 
    width:60%; 
    height: 500px; 
    background:lightblue; 
} 
.rightsidebar { 
    float:right; 
    width:20%; 
    height: 500px; 
    background:lightgreen; 
}

來源

2014-10-29 user2897821

爲什麼div的使用，而不是IFRAME？ – Steve 2014-10-29 21:20:25

我儘量遠離他們。但是如果需要的話，我可以使用iframe，只要點擊鏈接時只有在div和頁面中加載的iframe不會刷新 – user2897821 2014-10-29 21:26:36

您所描述的可以通過ajax調用完成。 – 2014-10-29 21:36:05

一種選擇是使用jQuery的負載功能。讓您的導航錨唯一的ID，並從那裏你可以使用類似這樣的代碼：

$(function() { 
    $("#nav_page_a").on("click", function() { 
     $("#main").load("PageA.html"); 
    }); 
    $("#nav_page_b").on("click", function() { 
     $("#main").load("PageB.html"); 
    }); 
});

看一看這樣的：http://api.jquery.com/load/

來源

2014-10-29 21:30:26 pmahomme

謝謝，這是爲我工作。 – user2897821 2014-10-29 23:10:50

這將如何影響搜索引擎結果？就好像用戶在第3頁上搜索某些內容一樣，我希望顯示整個頁面而不僅僅是第3頁上的內容？ – user2897821 2014-10-29 23:34:31

老實說，我從來沒有使用這樣的會議建立網站，而我其實很好奇你爲什麼不使用服務器端包含（或者如果是masterpage）。NET）的頭/導航/頁腳，並簡單地爲每個「頁面」創建單獨的頁面。 – pmahomme 2014-10-30 00:34:10

使用jQuery

$(".main").load("yourpage.html");

來源

2014-10-29 21:23:02 shakirthow

到你的鏈接添加的href屬性，你想要去到相應的頁面。

<li><a href="Page1.html">Page1.html</a></li> 
<li><a href="Page2.html">Page2.html</a></li>

，然後將下面應通過解決您的問題jQuery的

$(function(){ 
    $(".nav li a").click(function(e){ 
     e.preventDefault(); //To prevent the default anchor tag behaviour 
     var url = this.href; 
     $(".main").load(url); 
    }); 
});

來源

2014-10-29 21:26:58 Shikhar

加載頁面內容時，點擊

回答

相關問題