Q:

JQuery changing css toggles back on mouse release

I'm trying to create a fairly simple script which uses links to toggle which div is being displayed. There is a div for each day, and when a corresponding link is clicked, it shows the according div and hides the others.
This works, but once you release the mouse it reverts back to the default state. I'm guessing this is something very simple, but I've tried searching around and can't find anything. 
Here is the code I'm using: 
Fiddle
$(document).ready(function() {

    var dayDivs = [];
    var displayDay = 0;
    loadDayDivs();
    adjustDayDisplay();

    $('.day-link').mousedown(function() {
        var linkClicked = $(this).text();
        switch (linkClicked) {
            case "Friday":
                displayDay = 0;
                break;
            case "Saturday":
                displayDay = 1;
                break;
            case "Sunday":
                displayDay = 2;
                break;
        }
        adjustDayDisplay();
    });

    function loadDayDivs() {
        dayDivs[0] = $(".friday-div");
        dayDivs[1] = $(".saturday-div");
        dayDivs[2] = $(".sunday-div");
    }

    function adjustDayDisplay() {
        for (var i = 0; i < dayDivs.length; i++) {
            dayDivs[i].css("cssText", "display: none !important;");
        }
        dayDivs[displayDay].css("cssText", "display: inline !important;");
    }

});

on jsfiddle I get a strange error which seems to be associated with forms normally. Any help on this would be VERY much appreciated.

A:

You should change the mouse down event to click event and suppress the click event.
This fiddle works
$('.day-link').click(function(e) {
    e.preventDefault(); // New line

