如何在标题菜单中显示所选页面的行下答案

【问题标题】：How to display Under Line of selected page in header Menu如何在标题菜单中显示所选页面的行下
【发布时间】：2017-01-27 19:13:59
【问题描述】：

我想在标题菜单中的选定页面行下显示。并且标头是所有的命令文件。是 Header.php

<div id="navbar" class="collapse navbar-collapse">
 <ul class="nav navbar-nav" id="nav">
   <li class="<?php (basename($_SERVER['PHP_SELF'], "index.php") !== false) ? 'active' : '' ?>"><a href="index.php">Home</a></li>
<li class="<?php (strpos($_SERVER['REQUEST_URI'], "jobsList") !== false) ? 'active' : '' ?>"><a href="jobsList.php?id=3">Bank Job</a></li>
<li class="<?php (strpos($_SERVER['REQUEST_URI'], "boardResult") !== false) ? 'active' : '' ?>"><a href="boardResult.php">Board Result</a></li>
<li class="<?php (strpos($_SERVER['REQUEST_URI'], "AdmitCard") !== false) ? 'active' : '' ?>"><a href="AdmitCard.php">Admit Card</a></li>
<li class="<?php (strpos($_SERVER['REQUEST_URI'], "AnsKey") !== false) ? 'active' : '' ?>"><a href="AnsKey.php">Answer Key </a></li>
<li class="<?php (strpos($_SERVER['REQUEST_URI'], "TimeTable") !== false) ? 'active' : '' ?>"><a href="TimeTable.php">Time Table </a></li>

</ul>
</div>

【问题讨论】：

检查当前网址是否与链接匹配
我不知道该怎么做，
我如何检查先生???
使用内联css添加边框来解决这个问题
感谢您的支持。

标签： php html css

【解决方案1】：

我知道你可以使用 PHP。

您可以检查 URL 上的当前 URI，如果匹配，则在所需的 li 上添加“活动”类以添加下划线样式:)

这样就可以了：

HTML

<div id="navbar" class="collapse navbar-collapse">
 <ul class="nav navbar-nav" id="nav">
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "index") !== false) ? 'active' : '' ?>"><a href="index.php">Home</a></li>
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "jobsList") !== false) ? 'active' : '' ?>"><a href="jobsList.php?id=3">Bank Job</a></li>
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "boardResult") !== false) ? 'active' : '' ?>"><a href="boardResult.php">Board Result</a></li>
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "AdmitCard") !== false) ? 'active' : '' ?>"><a href="AdmitCard.php">Admit Card</a></li>
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "AnsKey") !== false) ? 'active' : '' ?>"><a href="AnsKey.php">Answer Key </a></li>
    <li class="<?php echo (strpos($_SERVER['REQUEST_URI'], "TimeTable") !== false) ? 'active' : '' ?>"><a href="TimeTable.php">Time Table </a></li>
 </ul>
</div>

或者你可以试试

<li class="<?= (strpos($_SERVER['REQUEST_URI'], "index") !== false) ? 'active' : '' ?>"><a href="index.php">Home</a></li>

CSS

#nav li.active a {
  /* Apply the styles you want on the active anchors*/
  border-bottom: 1px solid red;
}

【讨论】：

@Meenapatel 现在它应该可以工作了，抱歉我现在有点困，我错过了一些元素。
类未添加。为什么？
我同意@B.Desai 编辑，这是另一个愚蠢的错误，我会去睡觉 :)
现在检查@Meenapatel
@Meenapatel 我们不是来做你所有的工作的，我们可以为你提供解决问题并检查代码错误的正确方法，但其余的都来自你，我想我们展示了您已经如何在 li 上添加活动课程，现在轮到您了，以防您遇到困难创建一个新问题。

【解决方案2】：

您可以在此处设置border-bottom 属性示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
 li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 }
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
border-bottom: 5px solid blue;
}
</style>
</head>
<body>

 <ul>
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
</body>
</html>

【讨论】：

访问我的页面：fbfunzone.com/jobPortalplus/index.php 我希望 css 与悬停时相同