CODEWITHSUNDEEP
htmlcss
user6464928
user6464928

Reputation:

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>

Upvotes: 1

Views: 2092

Answers (2)

Akash
Akash

Reputation: 377

You have to check the page url and match href in the element and add class active to respective element

You can use the following script with jQuery Lib if every time new page is open else you can use the code above by @Bhavya shah

Replace test.html page2.html by the name of page u have

$(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');

    });

Upvotes: 0

Bhavya shah
Bhavya shah

Reputation: 158

add this script 

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

add this in style

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

see the link https://jsfiddle.net/bhavyashah/rv6adud7/3/

Upvotes: 1

Related Questions