菜单标签的选择/活动样式取决于url，javascript函数中的file.php

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');
}