Question

我想创建一个网站，在每个网页上执行相同的导航栏。我已经设法使用简单的jquery技术创建了相同的导航栏。我的导航栏有一个带有引导程式样式的侧边栏元素。在侧边栏的右侧，我必须生成与导航栏上的网页点击相对应的唯一标题。我想知道这是使用javascript或jquery创建不同标题的一种方法。

nav.html：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 col-sm-4 sidebar1">
      <div class="logo">
        <img src="images/group_logo.jpg" class="img-responsive align-middle" alt="Logo">
        <hr align="left" width="200px;">
      </div>
      <br>
      <div class="left-navigation">
        <ul class="list">
          <!--<h5><strong>Actionlist</strong></h5>-->
          <li><i class="glyphicon glyphicon-th-large"></i><a href="index.html">Dashboard</a></li>
          <li><i class="glyphicon glyphicon-certificate"></i><a href="grading.html">Seating</a></li>
          <li><i class="glyphicon glyphicon-book"></i><a href="report.html">Report</a></li>                         
        </ul>                         
      </div>
    </div>

    <div class="col-md-10 col-sm-8 main-content">
      <!--Main content code to be written here --> 

      <h1>
        <i class="glyphicon glyphicon-menu-hamburger"></i>
        Dashboard
      </h1>
      <hr align="left" width="100%">

      <!-- Create action buttons -->

    </div>
  </div>
</div>

在index.html中，我在body标签下面有以下代码来加载容器。如何为不同的HTML页面创建唯一标题？

 <div id="nav-placeholder"></div>

 <script>
   $.get("nav.html", function(data) {
     $("#nav-placeholder").replaceWith(data);
   });
 </script>

Answer 1

您可以使用文件名设置页面加载后的标题。

             <h1>
              <i class="glyphicon glyphicon-menu-hamburger"></i>
              <span id="nav-placeholder">Dashboard</span>
            </h1>

然后使用这样的脚本 -

<script>
$(document).ready(function() {
    var navPlaceholder= "";
    var url = window.location.pathname;
    var filename = url.substring(url.lastIndexOf('/')+1);

    switch(filename) {
        case "seaing.html":
            navPlaceholder = "Seating";
        break;

        case "report.html":
            navPlaceholder = "Report";
        break;

        default:
            navPlaceholder = "Dashboard";
        break;   
    }

    $("#nav-placeholder").replaceWith(navPlaceholder);

});

</script>

Answer 2

未经测试，但这应该会给你一个想法并引导你朝着正确的方向前进。

将链接存储在变量中;
将链接的标题存储在变量中;

<强>演示：

<script>
$('.left-navigation a').on('click', function(){
  var getUrl = $(this).attr('href'),
      getTitle = $(this).text();

      /* Log variable to console - remove for production */
      console.log('The Url:',getUrl);
      console.log('The Title:',getTitle);

  $.get(getUrl, function(data) {
    $("#nav-placeholder").replaceWith(data);
    $('#page-title').text(getTitle); /* Update the page title */
  });
});
</script>

要定位正确的元素以更新页面标题，请按以下步骤更新html结构：

<h1><i class="glyphicon glyphicon-menu-hamburger"></i> <span id="page-title">Dashboard</span></h1>

我们不希望脚本删除嵌套在h1元素中的glyphicon图标，因此我们将需要更新的文本包装在我们可以专门定位的元素中（#page-title）。 / p>

加载了唯一标题的相同导航栏

2 个答案: