[js] 在HTML页面中引入公共的部分的代码 css js html

最新推荐文章于 2022-05-18 14:28:01 发布

533_

最新推荐文章于 2022-05-18 14:28:01 发布

阅读量1.4k

点赞数

分类专栏： # js 文章标签： css html

本文链接：https://blog.csdn.net/qq_14993591/article/details/120828697

版权

js 专栏收录该内容

158 篇文章 2 订阅

订阅专栏

引入公共html

<div id="head"></div>
<div id="side"></div>

 <script>
 $("#head").load("com/head.html");
 $("#side").load("com/side.html");
 </script>

在这里插入图片描述
将头部重复的代码复制在head.html界面里面

 <div class="header-right">
    <div class="profile_details_left">
      <!--notifications of menu start -->
      <ul class="nofitications-dropdown">
        <li class="dropdown head-dpdn">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
              class="fa fa-bell"></i><span class="badge blue">3</span></a>
          <ul class="dropdown-menu">
            <li><a href="#">
                <div class="user_img"><img src="images/p5.png" alt=""></div>
                <div class="notification_desc">
                  <p>危险区域报警</p>
                </div>
                <div class="clearfix"></div>
              </a></li>
            <li class="odd"><a href="#">
                <div class="user_img"><img src="images/p6.png" alt=""></div>
                <div class="notification_desc">
                  <p>滞留报警</p>
                </div>
                <div class="clearfix"></div>
              </a></li>
            <li><a href="#">
                <div class="user_img"><img src="images/p7.png" alt=""></div>
                <div class="notification_desc">
                  <p>sos报警</p>
                </div>
                <div class="clearfix"></div>
              </a></li>
            <li><a href="#">
                <div class="user_img"><img src="images/p8.png" alt=""></div>
                <div class="notification_desc">
                  <p>脱岗串岗报警</p>
                </div>
                <div class="clearfix"></div>
              </a></li>
            <li>
            </li>
          </ul>
        </li>
        <li class="dropdown head-dpdn">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i
              class="fa fa-tasks"></i><span class="badge blue1">9</span></a>
          <ul class="dropdown-menu">

            <li><a href="#">
                <div class="task-info">
                  <span class="task-desc">南通部分</span>
                  <div class="clearfix"></div>
                </div>
              </a></li>
            <li><a href="#">
                <div class="task-info">
                  <span class="task-desc">无锡部分</span>
                  <div class="clearfix"></div>
                </div>

              </a></li>
            <li><a href="#">
                <div class="task-info">
                  <span class="task-desc">苏州部分</span>
                  <div class="clearfix"></div>
                </div>

              </a></li>
            <li><a href="#">
                <div class="task-info">
                  <span class="task-desc">成都部分</span>
                  <div class="clearfix"></div>
                </div>

              </a></li>

          </ul>
        </li>
      </ul>
      <div class="clearfix"> </div>
    </div>
    <!--notification menu end -->
    <div class="profile_details">
      <ul>
        <li class="dropdown profile_details_drop">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            <div class="profile_img">
              <span class="prfil-img"><img src="images/p1.png" alt=""> </span>
              <div class="user-name">
                <p>王婷</p>
                <span>Admin</span>
              </div>
              <i class="fa fa-angle-down lnr"></i>
              <i class="fa fa-angle-up lnr"></i>
              <div class="clearfix"></div>
            </div>
          </a>
          <ul class="dropdown-menu drp-mnu">

            <li> <a href="#"><i class="fa fa-user"></i> 修改密码</a> </li>
            <li> <a href="#"><i class="fa fa-sign-out"></i>退出登录</a> </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="clearfix"> </div>
  </div>
  <div class="clearfix"> </div>

在当前界面（test.html）引入公共代码
在这里插入图片描述

（test.html）

<!DOCTYPE HTML>
<html>
    <head>
        <title>Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/font-awesome.css" rel="stylesheet">
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js">
        </script>
    </head>
    <body>
        <div class="page-container">
            <div class="left-content">
                <div class="mother-grid-inner">
                    <!--头部导航导入-->
                    <div class="header-main">
                        <div id="head"></div>
                    </div>
                    <div class="inner-block">
                        <div class="climate" style="height: 2123px;">
                            内容
                        </div>
                    </div>
                </div>
            </div>
            <!--侧边栏导入-->
            <div class="sidebar-menu">
                <div id="side"></div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <script>
            $("#head").load("com/head.html");
            $("#side").load("com/side.html");
        </script>
    </body>
</html>

引入公共css

直接在test.html引入head.css就行，css样式就可以生效

<link rel="stylesheet" href="../css/head.css">

引入公共js

<link rel="stylesheet" href="../css/head.css">
<script>
    $(function(){
        /*公共部分：头部*/
         $("#head").load("com/head.html",function(){
           var sc =  document.createElement("script");
           sc.src= "../../template/head.js";
           $("body").append(sc);
        });
    })
</script>

参考：
在HTML页面中引入公共的部分的代码

使用jquery的load方法加载html页面，但是html引入的js不生效

533_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[js] 在HTML页面中引入公共的部分的代码 css js html

引入公共html<div id="head"></div><div id="side"></div> <script> $("#head").load("com/head.html"); $("#side").load("com/side.html"); </script>将头部重复的代码复制在head.html界面里面 <div class="header-right"> <div c
复制链接

扫一扫