JavaScript选项卡动态宽度.animate()只能工作一次

我是JavaScript的新手，我正在学习中，所以我只需要知道我在这里做错了什么。我有JavaScript选项卡，其中包含数据表中的三个表，每个表都有不同的宽度。我在这里的目标是通过使用.animate()来调整每个表宽度的选项卡，第一次它可以工作，但下次我单击其他选项卡时，动画将不再工作。

这是我最初的JavaScript标签代码：

$(document).ready(function(){
$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
    
    
    $("#ledger-tabs").animate({width: "90%"});
    $("#calls-tabs").animate({width: "150%"});
    $("#serial-tabs").animate({width: "70%"});
});

我在想也许我应该做回调函数，但似乎对我来说运气不好，如果有人能为我指出，那就太好了。

    $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current', function(){
        $("#ledger-tabs").animate({width: "90%"});
        $("#calls-tabs").animate({width: "150%"});
        $("#serial-tabs").animate({width: "70%"});
    });
    $("#"+tab_id).addClass('current');

这是我的CSS：

body{
    margin-top: 40px;
    font-family: "PT Sans", sans-serif;
    line-height: 1.6;
    background:#D9D9D9;
}
.container{
    width: 800px;
    margin: 2px;
}
ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.tabs li{
    background: #A2A8B6;
    color: #495E92;
    font-weight: bold;
    display: inline-block;
    padding: 10px 40px;
    cursor: pointer;
    
}
ul.tabs li:hover{
    background:#3e5697;
    color:#fff;
}
ul.tabs li.current{
    background: #ededed;
    color: #29448c;
    border-top: thick solid #29448c;
    font-weight: bold;
}
.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;
}
.tab-content.current{
    display: inherit;
}
#ledger_table, #call_history_table, #serial_table{
    text-align:center;'
    display:none;
    margin:2px;
    overflow:scroll;
}

这是标记：

<body>
<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="ledger-tabs">Ledgers</li>
        <li class="tab-link" data-tab="calls-tabs">Calls History</li>
        <li class="tab-link" data-tab="serial-tabs">Serials Number</li>
    </ul>
    <div id="ledger-tabs" class="tab-content current">
        <table id="ledger_table"class="display" cellpadding="0" cellspacing="0" border="0" width="100%">
        <thead>
        <tr>
            <th>Line</th>
            <th>Company Number</th>
            <th>Date</th>
            <th>Reference Number</th>
            <th>Description</th>
            <th>Amount</th>
            <th>Amount Total</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
    </div>
    <div id="calls-tabs" class="tab-content">
        <table id="call_history_table"class="display" cellpadding="0" cellspacing="0" border="0" width="100%">
        <thead>
        <tr>
            <th>Line</th>
            <th>Company Number</th>
            <th>Date</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Duration</th>
            <th>Total Duration</th>
            <th>Rep</th>
            <th>L1</th>
            <th>L2</th>
            <th>L3</th>
            <th>L4</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
    </div>
    <div id="serial-tabs" class="tab-content">
        <table id="serial_table" class="display" cellpadding="0" cellspacing="0" border="0" width="100%">
        <thead>
        <tr>
            <th>Line</th>
            <th>Company Number</th>
            <th>NV2 Serial Number</th>
            <th>NV1 Serial Number</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
        </table>
    </div>

</div><!-- container -->

</body>

非常感谢所有人的评论和意见。

这里我在jsFidle中留下了一个链接，选项卡可以工作。我不知道你对animate({width: "90%"});做了什么，但也许你想阅读这个链接，

相关内容

最新更新

热门标签：