Found this gem while working on a freelance gig. It's meant to show/hide page content depending on the current month:
<!--THIS SCRIPT CHECKS THE MONTH AND TRIGGERS THE CLASES ACCORDINGLY-->
<script type="text/javascript">
var d = new Date();
var month = d.getMonth();
switch (month) {
case 0: $(function() {
$("#mn_1").attr('class','tabli active');
$('#tab-1').show();
});
break;
case 1: $(function() {
$("#mn_2").attr('class','tabli active');
$('#tab-2').show();
});
break;
case 2: $(function() {
$("#mn_3").attr('class','tabli active');
$('#tab-3').show();
});
break;
case 3: $(function() {
$("#mn_4").attr('class','tabli active');
$('#tab-4').show();
});
break;
case 4: $(function() {
$("#mn_5").attr('class','tabli active');
$('#tab-5').show();
});
break;
case 5: $(function() {
$("#mn_6").attr('class','tabli active');
$('#tab-6').show();
});
break;
case 6: $(function() {
$("#mn_7").attr('class','tabli active');
$('#tab-7').show();
});
break;
case 7: $(function() {
$("#mn_8").attr('class','tabli active');
$('#tab-8').show();
});
break;
case 8: $(function() {
$("#mn_9").attr('class','tabli active');
$('#tab-9').show();
});
break;
case 9: $(function() {
$("#mn_10").attr('class','tabli active');
$('#tab-10').show();
});
break;
case 10: $(function() {
$("#mn_11").attr('class','tabli active');
$('#tab-11').show();
});
break;
case 11: $(function() {
$("#mn_12").attr('class','tabli active');
$('#tab-12').show();
});
break;
}
</script>
Reflections:
- Basic math and string manipulation is for suckers. It's always better to use a switch statement.
- External src for Javascript code? No thanks, inline <script> tags are best, preferably littered throughout the HTML document at random. Double for CSS.
- Instead of writing one jQuery document ready handler it's better to write twelve. Sure, it makes it harder to maintain, but it sure does improve readability, amirite?
- Also, always use $ as your jQuery selector. No other script loaded after jQuery will ever redefine $