57
rated 0 times
[
62]
[
5]
/ answers: 1 / hits: 5598
/ 10 Years ago, mon, april 28, 2014, 12:00:00
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.
More From » jquery
