CODEWITHSUNDEEP
javascriptjqueryhtmlcss
winixxee
winixxee

Reputation: 564

Trying to do a:active to stay on untill other link is clicked

What I'm trying to do is this: I have two links hot/update. When hot is clicked it should turn red and update to be black. When update is clicked it should turn red and hot to be black.

This works on a Fiddle, but not on my website.

I was able to find various answers on SO, as this seems like a common thing to ask. I was implementing one by one, but none of them works. They seem to work fine in fiddle but not on my web.

HTML:

<div id="Space" >
  <ul>
    <li role="presentation" class="sort">
      <a class="link" href="/?sort=score&page=1" style="text-decoration:none;">hot</a>
    </li>    
    <li role="presentation" class="date">
      <a class="link" href="/?sort=date&page=1" style="text-decoration:none;">update</a>
    </li>
  </ul>
</div>

JavaScript:

$(function() {
  var links = $('a.link').click(function() {
    links.removeClass('active');
    $(this).addClass('active');
  });
});

CSS:

a.link.active { color: red; }
a, a:visited { color: black }

Right now, this does what a:active does, it won't stay red.

Upvotes: 0

Views: 142

Answers (3)

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

Try this javaScript once

$(function() {
   $('a.link').click(function(event) {
            event.preventDefault();
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});

Upvotes: 0

hyphnKnight
hyphnKnight

Reputation: 303

So to clarify you want certain buttons to be highlighted based on whether or not the url has a certain query. Highlight sort if url contains /?sort=score&page=1 and highlight date if url contains /?sort=date&page=1.

To do this all you need to do is search for each of those strings inside of your page's (window.location.search). The code for such a thing would be.

const highLightWhat = (window.location.search).search('sort=score') !== -1 ? 'Highlight sort' :
    (window.location.search).search('sort=date') !== -1 ? 'Highlight date' :
    'Highlight Nothing';

This flag then can be used as a reference to highlight one 'a' tag or another.

I hope this helped! (:

Upvotes: 0

random_user_name
random_user_name

Reputation: 26170

var links = does not do what you think it does.

You are thinking it is doing this:

var links = $('a.link');

But, since you're assigning it to the actual click event, it's not resulting in that selector.

You need to revise your code as follows:

// This is a "safer" document ready, to prevent conflicts with other $ libraries
jQuery(function($) {
  $('a.link').click(function() {
    // Remove the class from all other links
    $('a.link').removeClass('active');
    // Add the class to _just this link_
    $(this).addClass('active');
  });
});

Or, a version that preserves the var links:

// This is a "safer" document ready, to prevent conflicts with other $ libraries
jQuery(function($) {
  // Assign all links to the "links" variable
  var links = $('a.link');
  links.click(function() {
    // Remove the class from all other links
    links.removeClass('active');
    // Add the class to _just this link_
    $(this).addClass('active');
  });
});

Here's a working fiddle: https://jsfiddle.net/cale_b/tqzt8f7s/1/

Upvotes: 1

Related Questions