Change class li to active on load page (window.load)

Question

I have a dynamic page that have a main structure and the different content loads in another page. I have a menu with active class, but it's doesn't apply because the page doesn't reload, it's a # url.

The main structure is:

<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 and footerrow loads in another document, and all it's called on the main menu here (in the 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 and tasks.html have only the main content, not the nav and the footer (this is done to avoid repeating content such as header or footer). Because the url is #, it's not reload the page, so the class active doesn't apply to the new page, how can i solve this?

This is the 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>

Thanks.

hey , i am sorry , but where you attached your `jQuery` library file. — Amit Soni, Apr 28 '14 at 15:54
My JQuery files are attached to the index.html file (where has the main structure) — Pedro Corchero Murga, Apr 28 '14 at 15:56

score 2 · Answer 1 · answered Apr 28 '14 at 16:03

try this

$(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");
});

score 0 · Answer 2 · answered Apr 28 '14 at 15:54

0

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

Did you mean this?

answered Apr 28 '14 at 15:54

nicael

18,550
13
57
90

Sorry doesn't work, the li class doesn't change to show the li "nodes" active if i are in nodes. – Pedro Corchero Murga Apr 28 '14 at 15:57

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

I think your event doesn't gets triggered properly. Check out this post to see how you would listen to a hashchange event. Also there is a jQuery plugin that would enable this functionality.

edited May 23 '17 at 10:30

Community

1
1

answered Apr 28 '14 at 16:21

M K

9,138
7
43
44

Change class li to active on load page (window.load)

3 Answers3