Làm cách nào để sử dụng lại thanh điều hướng trên nhiều trang?

Question 1

Tôi vừa hoàn thành việc tạo trang chủ / index.html của mình. Để giữ thanh điều hướng ở vị trí của nó và giữ nó ở lại trong khi người dùng nhấp qua tất cả các trang của tôi. Tôi có phải sao chép và dán mã điều hướng lên đầu mỗi trang không? Hoặc có cách nào khác để làm như vậy trông sạch sẽ hơn không?

HMTL điều hướng:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Question 2

Đây là những gì đã giúp tôi. Thanh điều hướng của tôi nằm trong thẻ body. Toàn bộ mã cho thanh điều hướng nằm trong nav.htmltệp (không có bất kỳ html hoặc thẻ nội dung nào, chỉ có mã cho thanh điều hướng). Trong trang mục tiêu, điều này nằm trong headthẻ:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Sau đó, trong thẻ body, một vùng chứa được tạo với một id duy nhất và một khối javascript để tải nav.htmlvào vùng chứa, như sau:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Question 3

Tôi biết đây là một câu hỏi khá cũ, nhưng khi bạn có sẵn JavaScript, bạn có thể sử dụng jQuery và các phương thức AJAX của nó.

Đầu tiên, tạo một trang với tất cả nội dung HTML của thanh điều hướng.

Tiếp theo, sử dụng $.getphương thức của jQuery để tìm nạp nội dung của trang. Ví dụ: giả sử bạn đã đặt tất cả HTML của thanh điều hướng vào một tệp được gọi navigation.htmlvà thêm thẻ giữ chỗ (Thích <div id="nav-placeholder">) trong của bạn index.html, sau đó bạn sẽ sử dụng mã sau:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

Question 4

Bạn có thể sử dụng php để tạo trang web nhiều trang.

Tạo một header.php trong đó bạn nên đặt tất cả mã html của mình cho menu và mạng xã hội, v.v.
Chèn header.php vào index.php của bạn bằng cách sử dụng mã sau

<? php include 'header.php'; ?>

(Đoạn mã trên sẽ kết xuất tất cả mã html trước đoạn mã này) Nội dung trang web của bạn.

Tương tự, bạn có thể tạo footer và các phần tử khác một cách dễ dàng. PHP tích hợp sẵn hỗ trợ mã html trong các phần mở rộng của chúng. Vì vậy, tốt hơn hãy tìm hiểu cách khắc phục dễ dàng này.

Question 5

Một kỹ thuật rất cũ nhưng đủ đơn giản là sử dụng "Bao gồm phía máy chủ" , để đưa các trang HTML vào một trang cấp cao nhất có .shtmlphần mở rộng. Ví dụ, đây sẽ là index.shtmltệp của bạn :

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

Vâng, nó là khập khiễng, nhưng nó hoạt động. Hãy nhớ bật hỗ trợ SSI trong cấu hình máy chủ HTTP của bạn ( đây là cách thực hiện đối với Apache ).

Question 6

Brando ZWZ cung cấp một số câu trả lời tuyệt vời để xử lý tình huống này.

Re: Cùng điều hướng trên nhiều trang 21/08/2018 10:13 AM | LINK

Theo như tôi biết, có nhiều giải pháp.

Ví dụ:

Toàn bộ mã cho thanh điều hướng nằm trong tệp nav.html (không có bất kỳ html hoặc thẻ nội dung nào, chỉ có mã cho thanh điều hướng).

Sau đó, chúng tôi có thể tải trực tiếp nó từ jquery mà không cần viết nhiều mã.

Như thế này:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>

    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Giải pháp 2:

Bạn có thể sử dụng mã JavaScript để tạo toàn bộ thanh điều hướng.

Như thế này:

Mã Javascript:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

Question 7

Tôi không biết liệu nó có hiệu quả với bạn không nhưng nó có hiệu quả với tôi. Cố gắng đặt mã điều hướng mà không có bất kỳ thẻ tiêu đề hoặc nội dung nào (chỉ mã nơi thanh điều hướng bắt đầu và kết thúc). Điều gì sẽ xảy ra là bạn sẽ đặt các mã riêng biệt cho thanh điều hướng. Giả sử bạn đã có mã điều hướng trên navigation.html và bạn sẽ đưa nó vào trang khác, giả sử đó sẽ là index.php. Để bao gồm nó, hãy đặt bên trong thẻ body và thanh điều hướng sẽ được tải trên đó.