在加载页面上将类 li 更改为活动 (window.load)答案

【问题标题】：Change class li to active on load page (window.load)在加载页面上将类 li 更改为活动 (window.load)
【发布时间】：2014-04-28 15:48:00
【问题描述】：

我有一个具有主要结构的动态页面，并且在另一个页面中加载了不同的内容。我有一个带有活动类的菜单，但它不适用，因为页面没有重新加载，它是一个 # 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>

Nodes 和 tasks.html 只有主要内容，没有导航和页脚（这样做是为了避免重复内容，例如页眉或页脚）。因为 url 是#，所以没有重新加载页面，所以 class active 不适用于新页面，我该如何解决这个问题？

这是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>

谢谢。

【问题讨论】：

嘿，很抱歉，您在哪里附加了 jQuery 库文件。
我的 JQuery 文件附加到 index.html 文件（其中有主要结构）

标签： javascript jquery html css ajax

【解决方案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");
});

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

你是这个意思吗？

【讨论】：

抱歉不起作用，如果我在节点中，li 类不会更改为显示 li “节点”处于活动状态。