个人中心
gpt4 book ai didi

jquery - 使用 jQuery 在 Twitter Bootstrap 3 中重用页眉和页脚代码

转载 作者：行者123 更新时间：2023-12-01 07:09:03 25 4
gpt4 key购买 nike

我有一个使用 Twitter Bootsrap 3 创建的静态 Web 门户。

我想避免在所有 HTML5 页面中使用“页眉”和“页脚”代码。我知道我可以使用服务器端 PHP、JSP 等来使用 INCLUDE 标记来完成此操作，但这涉及到运行可用服务器的要求 - 这在我的用例中是不可行的。

我可以使用“jQuery”完成同样的任务吗？我对此不太熟悉，所以寻求帮助。

请在这里帮助我。谢谢..

下面是我的代码:

-->index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test PHP</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<?php include("includes/header.html");?>

<?php include("includes/navigation.html");?>

<div class="container-fluid">

 <!-- START Page Heading -->
 <div id="page-wrapper">
    <div class="container-fluid">
        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-10">
                <a><h1 class="page-header">Home </h1></a>
                <ol class="breadcrumb">
                    <li class="active">
                        <i class="glyphicon glyphicon-home"></i> Home
                    </li>
                </ol>

                <div class="container">
                  <div class="jumbotron text-center">
                    <h1>Sample Website</h1>                            
                    <div class="row">                              
                    </div>
                  </div>
                </div>

            </div>
        </div>
      </div>
    </div>
    <!-- END Page Heading -->       
   </div>
   </div>

  <?php include("includes/footer.html");?>

  <!-- Script References -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>

1) 导航栏标题.html

<div class="container-fluid">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"><strong>Sample Website</strong></a>
  </div>
  </div>
 </div>

2) 导航.html

<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
    <a href="index.html"><strong><i class="glyphicon glyphicon-home active"></i> HOME</strong></a>
    <hr>
    <ul class="nav nav-pills nav-stacked">
        <li class="nav-header"></li>
        <li><a href="overview.html"><i class="glyphicon glyphicon-cloud"></i><strong> Overview</strong></a></li>
        <li><a href="about.html"><i class="glyphicon glyphicon-picture"></i><strong> About</strong></a></li>                
    </ul>

    <div class="clearfix"></div>                   
    <hr>

    <a><strong><i class="glyphicon glyphicon-user"></i> VIEW 1 </strong></a>
    <hr>
    <ul class="nav nav-stacked">
        <li><a><i class="glyphicon glyphicon-list-alt"></i><strong> Type</strong></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                <li class="dropdown-submenu">
                    <a tabindex="-1">Type1</a>
                    <ul class="dropdown-menu">
                        <li><a href="View1_desc.html">Description</a></li>
                          <li class="divider"></li>                                  
                          <li class="dropdown-submenu">                                             
                            <!-- <li role="menu" class="dropdown-header">Schema Type</li> -->
                            <li class="dropdown-submenu">
                            <a tabindex="-1">Inner view1</a>
                            <ul class="dropdown-menu">
                              <li class="dropdown-submenu">
                                <li><a href="Innerview1_about.html">About</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">
                                <a tabindex="-1">Detail</a>
                                <ul class="dropdown-menu">
                                  <li><a tabindex="-1" href="detail1.html">Detail 1</a></li>
                                  <li><a tabindex="-1" href="detail2.html">Detail 2</a></li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        <li class="dropdown-submenu">
                        <a tabindex="-1">Type2/a>
                            <ul class="dropdown-menu">
                              <li class="dropdown-submenu">
                                <li><a href="type2desc.html">Description</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-submenu">
                                <a tabindex="-1">Inner view 2</a>
                                <ul class="dropdown-menu">
                                  <li><a tabindex="-1" href="idetail1.html">Detail 1</a></li>
                                  <li><a tabindex="-1" href="idetail2.html">Detail 2</a></li>
                                </ul>
                              </li>
                            </ul>
                    </ul>
                </li>
              </ul>         
    </ul>

    <hr>            
   </div>          
   </div>

3) 页脚.html

 <footer class="row">
 <div class="container">
 <div class="col-lg-4 col-lg-push-4 col-md-4 col-md-push-4 col-sm-4 col-sm-push-4 col-xs-12">
     <div class="text-center">
       <p>Copyright &copy; 2015 <a href="http://www.banes.com" title="Banes">
          <strong>Banes Ltd.</strong></a>
        </p>
     </div>
    </div>        
   </div>
  </footer>

最佳答案

假设您有以下代码:

<div id="myDiv">
</div>

如果你想加载一些东西到这个div中，你可以调用load函数。

$('#myDiv').load('path_to_your_html/name_of_your_html.html')

希望这会有所帮助。

关于jquery - 使用 jQuery 在 Twitter Bootstrap 3 中重用页眉和页脚代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32267074/

25 4 0
文章推荐： jquery - 悬停时淡化背景图像以显示背景颜色？
文章推荐： storage - 存储签名的道德规范
文章推荐： web-config - web.config 文件的轻量级编辑器
文章推荐： jquery - jquery如何修改formData
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com