Question

我有一个日期选择器问题。我在为我的网站做表格。它就像这样

<script>
            $(document).ready(function(){


               var first = $('.Partner').html();
               $('.content').append(first);
               $('.tabs:first').css('border-bottom','3px solid #36c');
               $('.check').datepicker({dateFormat: 'dd-mm-yy'});

               $('.check').click(function(){
                   $('.check').datepicker({dateFormat: 'dd-mm-yy'});
               });


                $('.tabs').click(function(){
                   var href = $(this).attr('alt');
                   $('.tabs').css('border-bottom','3px solid #f4f3f2');
                   $(this).css('border-bottom','3px solid #36c');
                   var content = $('.'+href).html();

                   $('.content').html(content);
                   $('.check').datepicker({dateFormat: 'dd-mm-yy'});
                   return false;
               });



             });

        </script>

最初，选项卡加载了文本框，单击该文本框将显示datepicker建议。如果我单击其他选项卡并返回初始选项卡，则日期选择器功能不起作用。

我的HTML

<div class="container">
                <ul class="nav">
                    <li><a class="tabs" alt="Partner">Partner Report</a></li>
                    <li><a class="tabs" alt="Single">Single Partner Report</a></li>
                    <li><a class="tabs" alt="Expiring">Expiring Plan</a></li>
                    <li><a class="tabs" alt="Whole">Whole Partner Report</a></li>
                </ul>
            </div>
            <div class="content">

            </div>
            <div class="Partner">
                <div class="container">
                    <div class="row-fluid">
                        <div class="span6">
                            <legend>Enter Tuition Id</legend>
                            <input type="text" name="getid" class="searchvalue" placeholder="Enter Tuition Id"/>
                            <input type="button" class="btn btn-info search" style="margin-top:-8px;" value="Search"/>
                        </div>
                        <div class="span6">
                            <legend>Select Date for Report Generation</legend>
                            <div class="row-fluid">
                                <div class="span12">
                                    <a href="#">Generate Report from last sent report</a>
                                </div>
                                <div class="span12">
                                    <div class="row-fluid" style="margin-left: -14px;">
                                        <div class="span6">
                                            <label>From</label>
                                            <input type="text" name="datePicker" class="datePick" id="datePick"/>
                                            <input type="text" class="check"/>
                                        </div>
                                         <div class="span6">
                                            <label>To</label>
                                            <input type="text" id="dateto"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="individual-content">
                        <legend>Search Results</legend>
                        <div class="tab-content">

                        </div>
                    </div>
                </div>
            </div>
            <div class="Single">
                 <div class="container">Single Partner</div>
            </div>
            <div class="Expiring">
                 <div class="container">Expiring Plan</div>
            </div>
            <div class="Whole">
                <div class="container">Whole Partner</div>
            </div>

Answer 1

您正在复制JQuery使用的ID，以识别最初设置的日期选择器。试试这个......

$(document).ready(function(){

       var first = $('.Partner').html();
       $('.content').append(first);
       $('.tabs:first').css('border-bottom','3px solid #36c');

        showContent('Partner');

        $('.tabs').click(function(){
           var href = $(this).attr('alt');
            $('.tabs').css('border-bottom','3px solid #f4f3f2');
           $(this).css('border-bottom','3px solid #36c');

            showContent(href);

           return false;
       });


     });

function showContent(href){               
           var content = $('.'+href).html();

           $('.content')
               .html(content)
               .find('.check').datepicker({dateFormat: 'dd-mm-yy'});
}

Jquery日期选择器选项卡

1 个答案: