Question

我的MVC应用程序中有简单的选项卡控件

查看

    <div class="span12" id="test" style="width: 810px;">
        <ul class="nav nav-tabs">
            <li class="active" id="li1"><a href="/#tab1"  data-toggle="tab">New Stream1</a></li>
            <li><a id="addspan" href="/#C" data-toggle="tab">+</a></li>
        </ul>
        <div class="tabbable">
            <div class="tab-content" id="tabContent">
                <div class="tab-pane active" id="tab1">
                   tab content
                </div>

            </div>
        </div>
    </div>


<script type="text/javascript">
    $(function () {
        var count = 2;
        $('#addspan').click(function () {
            $('li:last').prev().after('<li id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">New Stream</a></li>');
             $('li:last').removeClass("active");
            $('li:last').prev().addClass("active");

        });

    });
</script>

点击“addspan”或（+）li后我在最后一个li之前动态添加了一个li，所以我的查询是在点击（+）li之后将“.active”类添加到那个li，但我想要保持新添加的李是活跃的，我该怎么办？

我在javascript中添加以下代码之后观察到的另一个场景

<script type="text/javascript">
        $(function () {
            var count = 2;
            $('#addspan').click(function () {
                $('li:last').prev().after('<li id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">New Stream</a></li>');

                 //to keep newly added li active

                 $('li:last').removeClass("active");
                $('li:last').prev().addClass("active");

            });

        });
    </script>

它运行正常它将“.active”类添加到第二个最后一个li，但是在完成javascript函数之后它再次“.active”类继续li，我不知道为什么会发生这种情况？

请告诉我如何将“.active”课程设置为新添加的LI？

Answer 1

你可以这样做：

var $li = $('<li id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">New Stream</a></li>');

// Remove the previous active li class
$('li.active').removeClass("active");

// Add active class to new li
$li.addClass("active");

Answer 2

你可以尝试这个：

var count = 2;
$('#addspan').click(function (e) {
   e.preventDefault();
   $('li').removeClass("active");
   $('li:last').prev().after('<li id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">New Stream</a></li>');
   $('li:last').prev().addClass("active");
});

执行以下操作：

尝试停止默认行为e.preventDefault()
删除课程.active
添加新李
然后分配.active类

CHECKOUT THE FIDDLE

或者这个：

var count = 2;
$('#addspan').click(function (e) {
   e.preventDefault();
   $('li').removeClass("active");
   $('li:last').prev().after('<li class="active" id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">New Stream</a></li>');
});

如何在JQuery中保持第二个最后的活动

2 个答案:

CHECKOUT THE FIDDLE