-1

我正在尝试显示当前月份的选项卡式窗格。使用 Bootstrap 的选项卡方法。想知道是否有人看到此代码中的任何缺陷？到目前为止，它正在按照我想要的方式工作，使用和测试自己。

的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();
4

2 回答 2

2

而不是那个 looooooooooooong 开关盒，我会使用一个对象数组：

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-07T18:13:24.147 回答
0

要显示正确的内容，您应该在所选选项卡上触发点击事件。您为此类任务编写了相当长的代码 - 只要选项卡按顺序排列，您就可以确定按顺序激活哪个选项卡（查看jQuery.eq()）

$('#monthsTab li').eq(myMonth.getMonth()).trigger('click');
于 2013-01-07T18:16:32.773 回答