Is there a snippet for javascript switch statement for all the months

Question

I'm trying to display a tabbed pane with the current month. Using Bootstrap's tab method. Wondering if anyone sees any flaws in this code? So far It's working how I want, use and test yourself.

The HTML

<ul class="nav nav-tabs" id="monthsTab">
   <li><a href="#January" id="janLink" data-toggle="tab">January</a></li>
   <li><a href="#February" id="febLink" data-toggle="tab" >February</a></li>
   <li><a href="#March" id="marLink" data-toggle="tab">March</a></li>
   <li><a href="#April" id="aprLink" data-toggle="tab">April</a></li>
   <li><a href="#May" id="mayLink" data-toggle="tab">May</a></li>
   <li><a href="#June" id="junLink" data-toggle="tab">June</a></li>
   <li><a href="#July" id="julLink" data-toggle="tab">July</a></li>
   <li><a href="#August" id="augLink" data-toggle="tab">August</a></li>
   <li><a href="#September" id="sepLink" data-toggle="tab">September</a></li>
   <li><a href="#October" id="octLink" data-toggle="tab">October</a></li>
   <li><a href="#November" id="novLink" data-toggle="tab">November</a></li>
   <li><a href="#December" id="decLink" data-toggle="tab">December</a></li>
</ul>

And the JS:

var currentMonth = function () {
        var myMonth=new Date();
        var theMonth = myMonth.getMonth();
        var target = '';
        var month = '';
        switch (theMonth) {
         case 0:
            target = "janLink";
            month = "January";
         break;
         case 1:
            target = "febLink";
            month = "February";
         break;
         case 2:
            target = "marLink";
            month = "March";
         break;
         case 3:
            target = "aprLink";
            month = "April";
         break;
         case 4:
            target = "mayLink";
            month = "May";
         break;
         case 5:
            target = "junLink";
            month = "June";
         break;
         case 6:
            target = "julLink";
            month = "July";
         break;
         case 7:
            target = "augLink";
            month = "August";
         break;
         case 8:
            target = "sepLink";
            month = "September";
         break;
         case 9:
            target = "octLink";
            month = "October";
         break;
         case 10:
            target = "novLink";
            month = "November";
         break;
         case 11:
            target = "decLink";
            month = "December";
         break;
        }
        $('#monthsTab, ' + '#' + target).parent().addClass('active');
        $('#'+month).addClass('active');
    };
    currentMonth();

http://codereview.stackexchange.com/ is the appropriate place to post code that isn't broken. — Blazemonger, Jan 07 '13 at 18:12
Possible duplicate of http://stackoverflow.com/q/1643320/901048 — Blazemonger, Jan 07 '13 at 18:13
@Blazemonger ehhh not fully. But it should go to code review probably. — Naftali, Jan 07 '13 at 18:15
didn't know about code review, I should add that I'm wondering what's best for performance here? — asherrard, Jan 07 '13 at 18:18

score 2 · Answer 1 · answered Jan 07 '13 at 18:13

Instead of that loooooooooooong switch case I would use an array of objects:

var months = [
   {name: "January" , link: "janLink"}, 
   {name: "February" , link: "febLink"}, 
   ...
];

var currentMonth = function () {
    var myMonth = new Date();
    var theMonth = myMonth.getMonth();
    $('#monthsTab, #' + months[theMonth].link).parent().addClass('active');
    $('#' + months[theMonth].name).addClass('active');
};

score 0 · Answer 2 · answered Jan 07 '13 at 18:16

0

To show also a proper content you should trigger a click event on a choosen tab. You wrote quite o long code for such a task - as long as tabs are in order you can determine which tab to activate by order (look at jQuery.eq())

$('#monthsTab li').eq(myMonth.getMonth()).trigger('click');

answered Jan 07 '13 at 18:16

MFix

229
1
5

The idea is to display the proper content for whatever month it is on pageload so the user doesn't have to select the current month, but can still go back and forth between months. – asherrard Jan 07 '13 at 18:22
What I meant is that adding "active" class affects only a look of a tab. It doesn't activate a proper `.tab-pane` element. Thats why I proposed triggering a click event. – MFix Jan 07 '13 at 18:32
Twitter Bootstrap has a proper API for this : `.tab('show')` – Sherbrow Jan 07 '13 at 20:06

Is there a snippet for javascript switch statement for all the months

2 Answers2