如何突出显示活动链接

Question

我知道这已被再次提出，但我似乎面临一个挑战。我想要点击或激活链接变成紫色，以便可以确定哪个链接处于活动状态。我尝试了几种方法，但没有成功。请问，任何一个？

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

Answer 1

添加这个脚本

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

Answer 2

你必须检查元素中的页面URL和匹配href和添加类活跃于各个元素

你可以，如果每一次新的使用下面的脚本使用jQuery库页面打开 否则您可以使用上面的代码@Bhavya shah

将test.html page2.html替换为页面名称您有

$(document).ready(function() { 
    var pageURL = $(location).attr('href'), 
     pageName= [ /test.html/, /page2.html/, /page3.html/], 
     links = $('a'), 
     LinksToActive; 

    for(var i=0; i < $(pageName).size(); i++){ 
      for(var j=0; j < $(links).size(); j++){ 
       var str = $(links[j]).attr('href'); 
       if('str:contains(pageName[i])'){ 
        LinksToActive = $(links[j]); 
        break; 
       } 
       else{ 
        continue 
       } 
      } 
    } 
    $(LinksToActive).addClass('active'); 

    });