Hide clickable links inside div when opacity is 0

Question

I have the HTML structure as follows:

<div class="boxes workshops wrapl">
    <a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>

<div class="boxes exhibitions">
    <a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div> 
<div class="boxes gallery">
    <a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>

The class .boxes are squares set next to one another. There are about 30 boxes. Initially all the boxes are set to opacity:1 and all the -button class are set at opacity:0.

However, then also if I hover my mouse inside the .boxes, the links are clickable.

My .navi menu:

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Events</span></a>
    <a href="#"><span>Gallery</span></a>
    <a href="#"><span>Exhibitions</span></a>
</div>

My javascript code for changing the opacity.

    <script type="text/javascript">
    var isHome = true;
        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                isHome = c=="home";
                if (isHome){
                    $('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
                    $(".boxes").animate({opacity: 1.0}, 500 );

                } else {
                    $('.' + c).animate({opacity: 1.0}, 500 );
                    $('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
                    $('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
                    $('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
                }
            });
        });
</script>

How can I remove the click event of the -button elements when they are not visible?

EDIT #1 I don't have to click the .-button elements.

When I click home, all .boxes should appear, but the <a>..</a> elements in each .boxes must not be clickable. Then if I click .events, only the .boxes with class: .events should appear alongwith <a>...</a> elements having .events-button class[and they should be clickable now.]

The Jsfiddle is here.

Answer 1

I know you already accepted an answer, but the thing is simply blocking the click event doesn't stop the default behavior - the "hand" icon when you hover over the anchor, indicating something clickable. Really, you should be showing/hiding the anchors, not overriding what happens when they are clicked since they shouldn't be clickable in the first place.

Here is a jsfiddle that actually shows/hides the links, making them unclickable as a "side effect" but also the expected behavior for a user.

$(".boxes a").hide(); is added when the home link is clicked, hiding all anchor tags within the divs.

This is also used when any other nav item is clicked, then $('.' + c + ' a').show(); is used to show the relevant links.

Answer 2

to unbind unecessary handlers use .unbind()

Answer 3

working demo

$('a[class="button"]').click(function(e){ // <--- don't miss this e
    if ($(this).css('opacity')==0) e.preventDefault();
});