CODEWITHSUNDEEP
javascriptjqueryhtml
user6464928
user6464928

Reputation:

Active link turn different color

I'm trying to link those three scripts so that a active link turns to a different color purple. jquery.js contains the downloaded jquery library. I don't know why it is not working as expected. Anyone? 

<link href="site.css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="color.js"></script>

</head>

<body>


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


//JS color.js
$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});

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

Upvotes: 2

Views: 167

Answers (3)

Aidan
Aidan

Reputation: 767

Have you tried simply this?

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

Instead of trying to modify CSS classes with JQuery, why not simply do it all with CSS.

CSS active state is defined as

:active

Not as

.active

(Just in case you were trying to target the state and not intentionally doing it using classes)

Edit:

$(".navigation.menu").click(function(){
    $(".navigation.menu").css("color","#fff");
    $this.css("color","#f0f");
});

This may work for you, apologies if this edit is not completely correct as I am on my phone.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150030

When a link is clicked your click handler will run to change the class (and thus colour) of the clicked item in the current page, but then the normal page navigation will occur and the specified page will load, overwriting the change that was applied to the previous page.

Rather than using a click handler, you could run some code when the page loads to extract the page name from location.href and then use it as a selector to set the class on the anchor corresponding to the current page.

That is, if you could somehow tell that the current page is bsms.php then you could say $("a['href=bsms.php']).addClass("active");. So how would you do that? Here's one way:

$(document).ready(function() {
  var currentPage = location.href.match(/\/(\w+\.php)/);
  if (currentPage) {
    $("a[href='" + currentPage[1] + "']").addClass("active");
  }
});

This uses a regex that assumes the structure of your URLs is some variation on the following:

www.somedomainname.com/optional/folders/pagename.php?optionalargs=something

and just gets the pagename.php part.

The regular expression matches as follows:

\/         - a forward slash (which has to be escaped in the regex)
(          - beginning of a sub match
\w+        - one or more "word" characters
\.         - a literal .
php        - the literal characters php
)          - end of the sub match

The currentPage variable will be null if there was no match, otherwise it will be an array where the element at index 1 is the page name.

Upvotes: 0

user4520208
user4520208

Reputation:

Try This Code

HTML

<ul class="navigation-menu" >
  <li class="active"><a href='#'>Home</a></li>
  <li><a href='#'>C2B Payments</a> </li>
  <li><a href='#'>C2B SMS</a></li>
  <li><a href='#'>B2C Payments</a>
    <ul>
      <li><a href="#"> B2C Payments</a></li>
      <li><a href="#"> Make Payments</a></li>
    </ul>
  </li>

  <li><a href='#'>B2C SMS</a></li>
  <li><a href='#'>Log Out</a></li>
</ul>

CSS

.active{
  background-color:purple;
}

Jquery

$(document).ready(function(){

$('li > a').click(function() {
    $('li').removeClass('active').css("background-color", "");

   var $paren = $(this).parent();
        if (!$paren.hasClass('active')) {
            $paren.addClass('active');
        }
});
});

Upvotes: 1

Related Questions