0

我的 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，但我想保持新添加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？

4

2 回答 2

0

你可以简单地这样做：

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");
于 2013-04-05T07:57:36.743 回答
0

你可以试试这个：

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");
});

做这些：

  1. 尝试停止默认行为e.preventDefault()
  2. 删除类.active
  3. 添加新的李
  4. 然后分配.active班级

检查小提琴

或者这个：

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>');
});
于 2013-04-05T07:57:56.890 回答