-1

今月のタブ付きペインを表示しようとしています。Bootstrap の tab メソッドを使用します。誰かがこのコードに欠陥があるかどうか疑問に思っていますか? これまでのところ、私が望むように機能しており、自分で使用してテストしています。

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

その 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-07T18:13:24.147 に答える
0

適切なコンテンツも表示するには、選択したタブでクリック イベントをトリガーする必要があります。あなたはそのようなタスクのために非常に長いコードを書きました - タブが順番に並んでいる限り、どのタブを順番にアクティブにするかを決めることができます ( jQuery.eq()を見てください)

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