Общий заголовок для всех веб-страниц с использованием bootstrap

Я использую twitter bootstrap, и теперь я хочу установить общий заголовок для всех связанных веб-страниц. Здесь я даю вам мою домашнюю страницу и этот код заголовка. Я использовал функцию load() в jquery, но она не работает. не могли бы вы помочь мне решить эту проблему.Общий заголовок для всех веб-страниц с использованием bootstrap

Мой код находится здесь,

home.html 

<html> 
<head> 

<link rel="shortcut icon" href="../resources/images/favicon.ico" /> 
<title>Welcome to Ringee</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- External Css File --> 

<link rel="stylesheet" type="text/css" href="../resources/css/home.css"> 

<!-- Css file Ends --> 

<!-- Bootstrap Plugins --> 

<link rel="stylesheet" 
    href="..\resources\plugin\bootstrap-3.3.5-dist\css\bootstrap.min.css"> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script 
    src="..\resources\plugin\bootstrap-3.3.5-dist\js\bootstrap.min.js"></script> 

<!-- Bootstrap Plugins Ends Here --> 
<!-- font awesome plugin --> 

<link rel="stylesheet" 
    href="../resources/plugin/font-awesome-4.4.0/css/font-awesome.css" /> 

<!-- Ends --> 

<!-- css mega menu plugins --> 

<link rel="stylesheet" 
    href="http://getbootstrap.com/dist/css/bootstrap.min.css"> 
<link rel="stylesheet" 
    href="http://getbootstrap.com/docs-assets/css/docs.css"> 
<link rel="stylesheet" 
    href="../resources/plugin/jQuery-Plugin-For-Auto-Hiding-Navigation-Menu-showup/showup.css"> 

<!-- css mega menu Ends here --> 

<!-- Scripts mega menu --> 

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script 
    src="..resources/plugin/jQuery-Plugin-For-Auto-Hiding-Navigation-Menu-showup/showup.js"></script> 
<script> 
    $("button").click(function() { 
     $(".bs-navbar-collapse").toggle(); 
    }); 
</script> 

<!--<script> 

    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     document.getElementById("header").innerHTML = xhttp.responseText; 
    } 
    }; 
    xhttp.open("GET", "E:\WEB-INF\pages\header.txt", true); 
    xhttp.send(); 

</script>--> 
<script> 
$(document).ready(function(){ 
$("#header").load("E:\WEB-INF\pages\header.html"); 
}); 
</script> 


<!-- script ends here --> 
</head> 
<body> 
    <div class="container"> 

     <!-- Header Section --> 

     <div id="header"></div> 

     <!-- body section starts here --> 

     <div class="col-xs-12 background font-family"> 

      <!-- image and video section --> 

      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="row"> 
         <img 
          src="../resources/images/redmi-mobile.png" 
          class="img-responsive img-spacing" width="200px" height="300px"> 
        </div> 
        <div class="row"> 
         <a href="#" 
          class="btn btn-success btn-lg pull-left button-space" 
          style="margin-bottom: 20px"> 
          Download App <span class="fa fa-download"></span> 
         </a> 
        </div> 
       </div> 

       <div class="col-sm-8 col-xs-12 pull-right space"> 
        <div class="embed-responsive embed-responsive-16by9"> 
         <iframe class="embed-responsive-item" width="600px" height="420px" 
          src="http://www.youtube.com/embed/93isFZYI8Fo"></iframe> 
        </div> 
       </div> 
      </div> 

      <!-- image and video section closing --> 
    ..... 
    ..... 

header.html 

<!-- Header Section --> 

     <nav class="navbar navbar-default "> 

      <!-- header --> 

      <div class="navbar-header pull-right"> 
       <div class="row-fluid"> 

        <a class="navbar-brand" href="#"><span><img 
          src="../resources/images/Ringee-logo.png" 
          class="image-responsive" width="50px" height="50px"/ > <img 
          src="../resources/images/Ringee-name.png" 
          class="image-responsive" width="90px" height="30px"/ ></span> </a> 
        <button class="navbar-toggle pull-right" style="margin-top: 10%" 
         type="button" data-toggle="collapse" 
         data-target=".bs-navbar-collapse"> 
         <span class="sr-only">Toggle navigation</span> <span 
          class="icon-bar"></span> <span class="icon-bar"></span> <span 
          class="icon-bar"></span> 
        </button> 
       </div> 
      </div> 

      <!-- header ends --> 

      <!-- list starts here --> 

      <div class="pull-left"> 

       <ul 
        class="nav navbar-nav bs-navbar-collapse collapse navbar-collapse pull-left"> 
        <li><a href="home.html" class="activePage">Home</a></li> 
        <li class=""><a href="FAQ.html">FAQ</a></li> 
        <li class="section"><a href="blog.html">Blog</a></li> 
        <li class="section"><a href="contact.html">Contact</a></li> 
       </ul> 
      </div> 

      <!-- list ends here --> 

     </nav> 


     <!-- Header Section Ends-->

источник

2016-01-11 Sri

Первое использование относительный путь. Не делайте '$ (" # header "). Load (" E: \ WEB-INF \ pages \ header.html ");' –

Попробуйте эту Js функцию

function loadPage(href) 
     { 
      var xmlhttp = new XMLHttpRequest(); 
      xmlhttp.open("GET", href, false); 
      xmlhttp.send(); 
      return xmlhttp.responseText; 
     }

Затем загрузите файл в div с помощью loadPage функции

<div id="header" onload="document.getElementById('header').innerHTML = loadPage(E:\WEB-INF\pages\header.html)"></div>

Или Вы можете используйте javascript, чтобы загрузить файл

document.getElementById('header').innerHTML = loadPage(E:\WEB-INF\pages\header.html)

JQuery

Если вы более комфортно с JQuery

$("#header").innerHTML = loadPage(E:\WEB-INF\pages\header.html)

источник

2016-01-11 07:38:40

Я думаю, что ваш код верен. но я пробовал ваш код на моей странице, не видимый заголовок. есть ли ошибки моего кода. – Sri

Я обновил код. Повторите попытку. –

жаль друга это тоже не работает для меня – Sri

Общий заголовок для всех веб-страниц с использованием bootstrap

ответ

Смежные вопросы