jQuery實現的網站統一風格導航（或標題欄）

時間 2019-12-05

原文原文鏈接

想實現整個網站都有相同<header>的效果（好比豆瓣這種：最上面一行老是同樣的）。
若是想更改其中的內容，只要改被包含的頁面便可。javascript

先寫一個標題欄頁面navbar.html：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 首先要設計一個導航頁：-->
    <title>navigation page</title>
    <link rel="stylesheet" href="css/site.css">
</head>
<body>
    <ul>
        <li><a href="./main.html" title="Home Page">Main</a></li>
        <li><a href="./link1.html" title="Link1">Link 1</a></li>
    </ul>
</body>
</html>

包含導航頁面的頁面：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $.get("navbar.html",function(data){
            $("#top").html(data);
        });
    </script>
</head>

<body>
<header>
    <div id="top" class="menu"></div>
</header>
</body>
</html>

在<header>中加一個div: <div id="top" class="menu"></div> ，用來存放導航內容jquery

/* ul li以橫排顯示 */

/* 全部class爲menu的div中的ul樣式 */

div.menu ul
{
    list-style:none; /* 去掉ul前面的符號 */
    margin: 0px; /* 與外界元素的距離爲0 */
    padding: 0px; /* 與內部元素的距離爲0 */
    width: auto; /* 寬度根據元素內容調整 */
}
/* 全部class爲menu的div中的ul中的li樣式 */
div.menu ul li
{
    float:left; /* 向左漂移，將豎排變爲橫排 */
}
/* 全部class爲menu的div中的ul中的a樣式(包括還沒有點擊的和點擊過的樣式) */
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71; /* 背景色 */
    border: 1px #4e667d solid; /* 邊框 */
    color: #dde4ec; /* 文字顏色 */
    display: block; /* 此元素將顯示爲塊級元素，此元素先後會帶有換行符 */
    line-height: 1.35em; /* 行高 */
    padding: 4px 20px; /* 內部填充的距離 */
    text-decoration: none; /* 不顯示超連接下劃線 */
    white-space: nowrap; /* 對於文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。 */
}
/* 全部class爲menu的div中的ul中的a樣式(鼠標移動到元素中的樣式) */
div.menu ul li a:hover
{
    background-color: #bfcbd6; /* 背景色 */
    color: #465c71; /* 文字顏色 */
    text-decoration: none; /* 不顯示超連接下劃線 */
}
/* 全部class爲menu的div中的ul中的a樣式(鼠標點擊元素時的樣式) */
div.menu ul li a:active
{
    background-color: #465c71; /* 背景色 */
    color: #cfdbe6; /* 文字顏色 */
    text-decoration: none; /* 不顯示超連接下劃線 */
}