Question

我有一个动态页面，它有一个主结构，另一个页面中加载了不同的内容。我有一个带有活动类的菜单，但它不适用，因为页面没有重新加载，它是一个＃url。

主要结构是：

<html lang="es">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ArqOS Scheduler</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/styles.css" rel="stylesheet">
    <link rel="stylesheet" href="css/responsiveslides.css">
    <link rel="stylesheet" href="css/demo.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,900,500,700' rel='stylesheet' type='text/css'>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

  <div class="divHead"></div>

  <div class="divBody"></div>

  <div class="footerrow"> </div>

JQuery的：

$(window).load( function(){
  $('nav navbar-nav li a').click(function() {
    $('li').removeClass();
    $(this).parent().addClass('active');
});
    $('.divHead').load("head.html");
    $('.divBody').load("home.html");
    $('.footerrow').load("foot.html");
});

function fLoadPage(page){
  $('.divBody').load(page);
}

DivHead，DivBody和footerrow加载到另一个文档中，并在主菜单上调用它（在head.html中）：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 style="width: 171px;">
      <a class="navbar-brand" href="index.html">ArqOS Scheduler</a></div>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="#" onclick="fLoadPage('nodes.html')">Nodes</a></li>
        <li><a href="#" onclick="fLoadPage('tasks.html')">Tasks</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

节点和tasks.html只有主要内容，而不是导航和页脚（这样做是为了避免重复内容，如页眉或页脚）。因为网址是＃，所以它不会重新加载页面，因此活动类不适用于新页面，我该如何解决？

这是foot.html：

<div class="col-sm-4">
   <p class="info"> Copyright 2014 ©  xxx</p>
</div>
<div class="col-sm-8 text-right">
   <p class="info2"> Acerca de | Contacto | Encontrar trabajo | Política de privacidad </p> 
</div>

感谢。

Answer 1

试试这个

$(window).load( function(){
  $(document).on("click",".navbar-nav li a" ,function() {
    $('.navbar-nav li').removeClass("active");
    $(this).parent().addClass("active");
    return false;
  });
    $('.divHead').load("head.html");
    $('.divBody').load("home.html");
    $('.footerrow').load("foot.html");
});

Answer 2

<li><a href="#" onclick="fLoadPage('nodes.html');window.location.reload();">Nodes</a></li>

你的意思是？

Answer 3

我认为您的活动无法正常触发。查看此post，了解如何收听 hashchange 事件。还有一个jQuery plugin可以启用此功能。

在加载页面上将类li更改为活动（window.load）

3 个答案: