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の前に1つのliを動的に追加したため、クエリは（+）liをクリックした後、そのliに「.active」クラスを追加しますが、新しく追加したままにしたいli はアクティブですが、どうすればよいですか?

JavaScriptで次のコードを追加した後、私が観察したもう1つのシナリオ

<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>

それは正常に動作し、最後から2番目のliに「.active」クラスを追加しましたが、javascript関数を完了した後、最後のliに再び「.active」クラスを追加しましたが、なぜこれが起こるのかわかりませんか?

新しく追加された LI に「.active」クラスを設定する方法を教えてください。

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 に答える