Question

我想在标题菜单中的选定页面下显示。而标题是所有人的Comman文件。是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>

Answer 1

我看到你可以使用PHP。

您可以检查网址上的当前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;
}

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

如何在标题菜单中显示选定页面的下划线

2 个答案: