jQuery实现的网站统一风格导航（或标题栏）

最新推荐文章于 2021-01-17 13:32:14 发布

weixin_33744854

最新推荐文章于 2021-01-17 13:32:14 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/344631/blog/1512369

本文介绍了一种在网站中实现统一顶部导航栏的方法，通过使用HTML、CSS和jQuery技术，可以轻松地在多个页面间共享相同的头部内容，并保持一致的设计风格。

2019独角兽企业重金招聘Python工程师标准>>>

想实现整个网站都有相同<header>的效果（比如豆瓣这种：最上面一行总是一样的）。
如果想更改其中的内容，只要改被包含的页面即可。

先写一个标题栏页面navbar.html：

<!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>

包含导航页面的页面：

<!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> ，用来存放导航内容

/* 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; /* 不显示超链接下划线 */
}

转载于:https://my.oschina.net/u/344631/blog/1512369