Question

HTML
I am adding my two links which will send my ‘Unanswered’ link to my admin controller and my ‘Answered’ link to a function in my admin controller.

<h2 class="unanswered">
   <?=anchor('admin/', 'Unanswered', array('class' => 'selected'))?>
</h2>

<h2 class="answered">
   <?=anchor('admin/answered_posts', 'Answered')?>
</h2>

Jquery
Here I am just trying to add and remove styles to my links. When I keep the return false my styles work fine, but my href in the html anchor no longer runs, so I am not able to get back the posts needed from my controller. When I remove the return false my href works fine and I am getting back what I need from my controller, but my styles that I am adding in my jQuery no longer work.

$('.unanswered').click(function(){
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
       return false;
     });

     $('.answered').click(function(){
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
       return false;
     });

Side Note
I have also tried doing:

$('.unanswered').click(function(e){
       e.preventDefault();
       $('.answered a').removeClass('active');
       $('.unanswered a').addClass('active'); 
     });

     $('.answered').click(function(e){
       e.preventDefault();
       $('.unanswered a').removeClass('active');
       $('.answered a').addClass('active');
     });

Answer 1

I’d refer to the comments on the question – if I understand your intent (click a link, update something behind the scenes on the server, and apply a style on the page without reloading the page) this is probably something you’d want to do with AJAX. For example (untested code):

$('.unanswered, .answered').click(function() {
    $.ajax({
        url: $(this).attr('href')
    }).done(function() {
        /* You'll need to add some logic in here to remove the active class from
        the answered or unanswered question if it exists. Depending on the rest of your 
        HTML, this could be done with something like $(this).closest('myWrapper').find('a.active').removeClass('active') */

        /* Once you've cleaned up any active classes, add an active class to this element */
        $(this).addClass('active');

    });
});

More reading on jQuery AJAX here: http://api.jquery.com/jQuery.ajax/

Since I don’t understand exactly what you’re attempting to do, you can also try this (which will update the class, then submit the request). You may not see the CSS changes reflected since the page will reload quickly.

$('.answered').click(function() {
   // Set up the classes here
   $('.unanswered a').removeClass('active');
   $(this).addClass('active');

   /* When this element has an active class, then it will redirect to the link's URL, the HREF attribute. We do this check because javascript is asynchronous, all lines can run at the same time, so this prevents window.location from being called before the class is changed */
   if($(this).hasClass('active')) {
       window.location = $(this).attr('href');
   }

   // Still return false to prevent the default redirect that would happen without javascript.
   return false;
 });