Jquery 'active' class when navigating with php codes - php

Question

So, im building a website and i want to give a "active" class to my menu depending on the page the user access. I'm new to Jquery, so i don't know if this is the best way to do it, or if there is a better code to achieve what i want.
Currently my main structure is:
Header
Navbar where is the menu i'm giving the active class
Content called with the php code
Footer
The only thing i need to change when loading another page, is the content it doesn't really matter if it's php or ajax. Actually, i know ajax can do it more dynamic, but i just don't know how to do it yet.
So this is the code i made to give a active class to my li a element correspondent to the webpage:
php to load page:
<?php
if(!empty($_GET['p'])){
if (file_exists ($_GET['p'].".php")){
include($_GET['p'].".php");
} else include ("erro.php");
} else include("content/home.php");
?>
Jquery to give it a class:
$(document).ready(function() {
var home = $('a[href$="home"]'),
servicos = $('a[href$="servicos"]'),
advogados = $('a[href$="advogados"]'),
escritorio = $('a[href$="escritorio"]'),
noticias = $('a[href$="noticias"]'),
contato = $('a[href$="contato"]');
$(function() {
var loc = window.location.href;
if(/home/.test(loc)) {
$('.navbar li').find(home).addClass('active');
} else if(/servicos/.test(loc)) {
$('.navbar li').find(servicos).addClass('active');
} else if(/advogados/.test(loc)) {
$('.navbar li').find(advogados).addClass('active');
} else if(/escritorio/.test(loc)) {
$('.navbar li').find(escritorio).addClass('active');
} else if(/noticias/.test(loc)) {
$('.navbar li').find(noticias).addClass('active');
} else if(/contato/.test(loc)) {
$('.navbar li').find(contato).addClass('active');
};
});
});
Is there another way or a best/easy way to do it?

Answer 1

Since you are using jQuery, take a look at jQuery's load function. Using load you can specify an html element(usually div) in which you will load pages, like this:
$("#myDiv").load("/my/page/folder/page.html");
To handle the menu you will need this piece of code:
// Select all menu links and attack event handler on them
$(".navbar li a").on("click", function(event){
// This stop the link from loading into the browser tab(we want it to load in a div)
event.preventDefault();
// Remove any previous highlight
$(".active").removeClass("active");
// Add highlight to the menu we clicked
$(this).addClass("active");
// Load the link into "myDiv"
$("#myDiv").load(this.href);
});
You may need to tweak around with this code, i haven't tested it, but this is how it works in general.
Note: in the pages you load, using jQuery's load function, you need only the content and not the whole HTML structure.
If you want to load only part of the page you can do so like this:
$("#myDiv").load("/my/page/folder/page.html #container");

Answer 2

Your method of page's inclusion is extremely dangerous as I can basically access any php file on your server.
I would recommend to use an array that contains all the allowed pages, like:
$pages = array('home', 'about', 'contact');
$current_page = '';
//Default page
if(!isset($_GET['p']) || empty($_GET['p'])){
$current_page = 'home';
}
Now, when you print the menu, you can do something like this:
foreach($pages as $page){
echo '<li><a href=""';
if($page == $current_page) echo ' class="active"';
echo '></a></li>';
}
You can expand your array of pages to contain also title, meta tags, etc.
For instance:
$pages = array(
'home' => array('title' => 'Home', 'meta_description' => 'Bla Bla Bla'),
'about' => array('title' => 'About Us', 'meta_description' => 'Bla Bla Bla')
);