Question

您好，我是javascript的新手，我在学习的曲线，所以我只需要一个线索，我在这里做错了什么。我有javascript选项卡，其中包含来自数据表的3个表，每个表具有不同的宽度。我在这里的目标是使用.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>

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

Answer 1

在这里，我在jsFidle中留下一个链接，标签正常工作。我不确定您使用animate({width: "90%"});做了什么，但也许您想阅读this link，

Javascript选项卡动态宽度.animate（）只能工作一次

1 个答案: