負載html元素在菜單列表

Question

我有一個站點導航等：

<ul> 
    <li> 
    <a href="/link1">Link 1</a> 
    </li> 
    <li> 
    <a href="/link2">Link 2</a> 
    </li> 
    <li> 
    <a href="/link3">Link 3</a> 
    </li> 
    <li> 
    <a href="/link4">Link 4</a> 
    </li> 
</ul> 

當在任一鏈接的用戶點擊，從每個URL的主要內容將被加載到一個頁面，頁面向下滾動到相關部分。我試過類似下面的東西，但它似乎不是最好的解決方案。有沒有更好的方法來做到這一點？謝謝。還應該指出下面的代碼無法正常工作，它會以不同的順序加載內容一次以上。

$("ul > li > a").each(function(index) { 
    var newhref = $(this).attr('href'); 

    $.get(newhref).done(function (html) { 
     $(".main-copy").append($(html).find(".main-copy")); 
    }); 

}); 

Answer 1

首先，我建議每一個環節應該是它裏面自己-li-這樣的：

<ul> 
    <li> 
    <a href="/link1">Link 1</a> 
    </li> 
    <li> 
    <a href="/link2">Link 2</a> 
    </li> 
    <li> 
    <a href="/link3">Link 3</a> 
    </li> 
    <li> 
    <a href="/link4">Link 4</a> 
    </li> 
</ul> 

至於JQuery的，這樣的事情應該做的伎倆：

$("ul > li > a").click(function(){ 
    $(".main-copy").load($(this).attr('href')); 
}); 

我希望你設定在正確的道路

Answer 2

如果負載的事情是工作，都是你只需看着滾動的東西？嘗試是這樣的：

// Creating a dummy namespace, as I don't have content to actually load via ajax. 
 
var myNameSpace = { 
 
    "link1": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link2": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link3": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link4": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>" 
 
}; 
 

 

 
    // Take each of the navigation elements, and use them to create the content sections 
 
    $("nav a").each(function() { 
 
    /*** 
 
    * This would be where you'd first want to load 
 
    * your HTML content, rather than using the namespace. 
 
    ***/ 
 
    // Get the actual text of the anchor, we'll use that later 
 
    var target = $(this).attr("href").substring(1); 
 

 
    // create the section tag... 
 
    var myTargetEl = document.createElement("section"); 
 

 
    // set the id for the link to use as a target 
 
    $(myTargetEl).attr("id", target).append("<h2>" + target + "</h2>").append(myNameSpace[target]); 
 

 
    // Add the section we've created to the content pane 
 
    $(".content-pane").append(myTargetEl); 
 

 
    // AND CHANGE THE ACTUAL LINK -- I don't want to reload 
 
    // this content every time! 
 
    $(this).attr("href", "#" + target); 
 
    }); 
 

 
    $("nav a").click(function() { 
 
    var target = $($(this).attr("href")); 
 
    if (target.length) { 
 
     event.preventDefault(); 
 
     $('html, body').stop().animate({ 
 
     scrollTop: target.offset().top 
 
     }, 1000); 
 
    } 
 
    }) 
 

nav { 
 
    position: fixed; 
 
    left: 10px; 
 
    top: 10px; 
 
    float: left; 
 
    width: 100px; 
 
    background-color: #ccc; 
 
} 
 
.content-pane { 
 
    position: relative; 
 
    left: 120px; 
 
    width: 400px; 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a href="/link1">Content 1</a> 
 
    <a href="/link2">Content 2</a> 
 
    <a href="/link3">Content 3</a> 
 
    <a href="/link4">Content 4</a> 
 
</nav> 
 
<div class="content-pane"> 
 
</div>

至於負載事情會發生，只是每個環節加載到其自己的節標記。事實上，使用鏈接列表來創建節塊，這樣如果添加更多的導航元素，它們就會動態加載。

修改了代碼，以便有被手動插入任何部分，他們通過鏈接標記自己創造。至於你如何加載它們，你似乎在做這件事 - 所有你缺少的是每次改變鏈接的HREF指向適當的部分。

Answer 3

這些鏈接是硬編碼還是動態生成的？ 在這兩種情況下，獲得所有這些鏈接到一個JavaScript數組：var links=['link1','link2'...]

既然你要通過這些鏈接導航到轉儲所有內容，您可以循環通過鏈接和追加內容

for(i=0;i<links.length;i++) { 
    var link = links[i]; 
    $.ajax(link).done(function(htmlContent){ 
        //set contents to some section or div 
        }); 
} 

現在，鏈接本身可以是頁面中的#href標籤。

我的建議是不使用jQuery的UL導航 - > LI路徑得到的鏈接列表。