アクティブなリンクをハイライトする方法

Question

これはもう一度尋ねられましたが、私は挑戦に直面しているようです。クリックしたり、アクティブなリンクを紫色に変えたりして、どのリンクがアクティブであるかを知ることができます。私はいくつかの方法を試みたが成功しなかった。親切に、いずれか？あなたは毎回新しい場合は、jQueryのLibので次のスクリプトを使用することができます

を要素内のページのURLと一致するHREFをチェックして、それぞれの要素にアクティブなクラスを追加する必要が

.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

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

スタイルでこれを追加し

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

このスクリプトを追加リンク正確ということですどのようにhttps://jsfiddle.net/bhavyashah/rv6adud7/3/

Answer 2

ページが開かれている 上記のコードを@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'); 

    });