【发布时间】:2021-04-04 03:08:36
【问题描述】:
我将我的 导航 用作单独的页面,即 Navigation.php,并且我将通过 <?php include 'header.php'; ?> 在每个页面中添加此页面。
但是当我进入一个页面时,例如:进入 About 页面,导航栏中的那个 About 按钮有一个类 class='active' 并且该类是由 javascript 添加的。
当我要进入第二级页面时,问题就来了:Portfolio > Portfolio Item
该脚本未在 Portfolio 按钮上添加类。Navigation.php 页面:
<ul class="nav nav-pills" id="mainNav">
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'index.php') ? 'class="active"' : ''; ?>>
<a class="nav-item nav" href="/home">
Home
</a>
</li>
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'about.php') ? 'class="active"' : ''; ?>>
<a class="nav-item" href="/about">
About
</a>
</li>
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'services.php') ? 'class="active"' : ''; ?>>
<a class="nav-item" href="/services">
Services
</a>
</li>
<li <?php if ((basename($_SERVER['SCRIPT_FILENAME'], '.php')) == 'portfolio' or 'portfolioItem') echo "class='active'";?>>
<a class="nav-item" href="/portfolio">
Portfolio
</a>
</li>
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'showcase.php') ? 'class="active"' : ''; ?>>
<a class="nav-item" href="/showcase">
Showcase
</a>
</li>
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'blog.php') ? 'class="active"' : ''; ?>>
<a class="nav-item" href="/blog">
Blog
</a>
</li>
<li <?php echo (basename($_SERVER['PHP_SELF']) == 'contact.php') ? 'class="active"' : ''; ?>>
<a class="nav-item" href="/contact">
Contact
</a>
</li>
</ul>
Javascript 我正在使用:
<script>
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$("nav-pills ul li").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).parent().addClass('active');
}
if ((($(this).attr("href") == 'index.php')||($(this).attr("href") == '')) && (pgurl == '')) {
$(this).parent().addClass("active");
}
})
});
</script>
【问题讨论】:
标签: javascript php css navigation nav