duan1982453
2017-01-27 09:13
浏览 37
已采纳

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

this is header of my website.

I want to show under line of Selected Page in header Menu. And The Header is Comman File For All. is 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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dsjuimtq920056 2017-01-27 09:24
    已采纳

    I see you can use PHP.

    You can check the current URI on the URL and if it matches then add the class 'active' on the desired li to add the underline style :)

    This would do the job:

    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>
    

    Or you can try

    <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;
    }
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • doucai6663 2017-01-27 09:21

    you can set border-bottom property sample here

    <!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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题