如何突出显示活动链接 [英] How to highlight active links

问题描述

我知道这已被再次提出，但我似乎面临一个挑战。我想点击或活动链接变紫，以便可以知道哪个链接是活动的。我尝试了几种方法，但不成功。请问，任何一个？

I know this has been asked again but I seem to facing a challenge. I want to have clicked or active links turn purple so that one can tell which link is active. I tried a couple of ways but not successful. Kindly, any one?

.nav-container {
    float: center;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 11px; 
}

.navigation-menu {
    padding:  0;
    float: center;
    clear: both;
    font-size: 12px
    margin-bottom: 0;
}

.navigation-menu > li {
    margin-right: 3px;
    margin: 100px auto;
    line-height:20px;
    max-width:860px;
    display: inline;
}

.navigation-menu li {
    list-style-type: none;
}

.navigation-menu li a {
    background-color: #ffffff;
    display:inline-block;
    padding: 10px 20px;
    color: #696969;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

.navigation-menu li.active a {
    background-color: purple;
    color:#fff;
}

.navigation-menu li ul {
    display: none;
}

.navigation-menu ul li a{
    padding:10px 20px;
}

#main {
    clear: left;
}

.navigation-menu li:hover ul {
    display: inline-block;
    position: absolute;  
    padding:5px;
}

.navigation-menu li ul li a:hover{
    background-color: black;
    color: white;
    display: block;
}

.navigation-menu li a:hover{
    background-color:black;
    color: white;
}

<div class="nav-container">
    <ul class="navigation-menu">
      <li><a href='start.php'>Home</a></li>
      <li><a href='pay.php'>C2B Payments</a> </li>
      <li><a href='sms.php'>C2B SMS</a></li>
      <li><a href='#'>B2C Payments</a>
        <ul>
          <li><a href="getbtc.php"> B2C Payments</a></li>
          <li><a href="payment.php"> Make Payments</a></li>
        </ul>
      </li>

      <li><a href='bsms.php'>B2C SMS</a></li>
      <li><a href='index.php'>Log Out</a></li>
    </ul>
  </div>

推荐答案

添加此脚本

   <script>
    $(document).ready(function(){
      $('ul li a').click(function(){
        $('li a').removeClass("active");
        $(this).addClass("active");
    });
    });
    </script>

以样式

.navigation-menu li a.active {
      background-color: purple;
      color:#fff;
      }

请参阅 https://jsfiddle.net/bhavyashah/rv6adud7/3/

这篇关于如何突出显示活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！