菜单选项卡选择/活动样式取决于url中的file.php、javascript函数


Menu tab selected/active style depending on the file.php in the url, javascript function

我目前使用的是:

<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>

但我不喜欢以这种方式使用php,我认为我在php服务器端处理这件事是在浪费时间。基本上,我想在javaScript中实现这一点,当页面被加载或加载时,一个javaScript函数会触发并更改类,具体取决于url中的file.php。此外,请避免所有JQuery脚本/插件和诸如此类的东西。

也许还有另一种方法可以有效地做到这一点?

希望我解释得好。~谢谢,我是人类。

如果你可以向这些元素添加一个ID属性(只是为了更容易地操作),你可以这样做(将脚本附加到主体的加载或脚本的末尾):

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