Question

I’m currently using this:

<a href="t1.php" class="<?php if(end(explode("/", $_SERVER["PHP_SELF"])) == "t1.php") { echo 'active'; } else {} ?>">Tab2</a>
<a href="t2.php" class="<?php if(end(explode("/", $_SERVER["PHP_SELF"])) == "t2.php") { echo 'active'; } else {} ?>">Tab2</a>

But I dont like to use php this way and I think I’m wasting time processing this on php server side.
Basically I want to make this in javaScript, when the page is loaded or loading, a javascript function trigers and change the class depending if the file.php in the url. Also, please avoid all JQuery script/plugins and all that kind of stuff.

Perhaps there is another way to do this efficiently?

Hope I explained well.
~Thanks, I’m Human.

Answer 1

If you could add to these elements an ID attr (just for easier manipulation), you could do something like this (attach script to onload of body or at the end of the script):

<a href="t1.php" id="tab1">Tab2</a>
<a href="t2.php" id="tab2">Tab2</a>

JavaScript:

var ThisLocation = document.location.href;
if(ThisLocation.indexOf('t1.php') !== -1)
{
    document.getElementById('tab1').setAttribute('class', 'active');
}
else if(ThisLocation.indexOf('t2.php') !== -1)
{
    document.getElementById('tab2').setAttribute('class', 'active');
}