是否存在所有月份的javascript switch語句片段

-1

我試圖顯示當前月份的選項卡式窗格。使用Bootstrap的選項卡方法。想知道是否有人在這段代碼中看到任何缺陷？到目前爲止它的工作方式是如何使用和測試自己。是否存在所有月份的javascript switch語句片段

的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>

而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();

來源

2013-01-07 asherrard

http://codereview.stackexchange.com/是發佈未被破壞的代碼的適當位置。 – Blazemonger

你可以使用一個數組來代替這個巨大的開關。 –

可能的重複http://stackoverflow.com/q/1643320/901048 – Blazemonger

相反那loooooooooooong開關殼體的我會使用對象的數組：

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'); 
};

來源

2013-01-07 18:13:24 Neal

要也顯示一個正確的內容，你應該在選擇的標籤上觸發一個點擊事件。你寫了很長Ø代碼這樣的任務 - 只要標籤是爲了你能確定由以激活該標籤（看jQuery.eq()）

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

來源

2013-01-07 18:16:32 MFix

這個想法是在頁面加載的任何月份顯示正確的內容，因此用戶不必選擇當前月份，但仍可以在幾個月之間來回切換。 – asherrard

我的意思是添加「活動」類只會影響標籤的外觀。它不會激活正確的'.tab-pane'元素。這就是爲什麼我建議觸發點擊事件。 – MFix

Twitter Bootstrap有一個適當的API：'.tab（'show'）' – Sherbrow

是否存在所有月份的javascript switch語句片段

回答

相關問題