javascript - How to Keep second last li active in JQuery -
i have simple tab control in mvc application
view
<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>
after click on "addspan" or(+) li have added 1 li dynamically before last li, query after click on (+) li add ".active" class li, want keep newly added li active, how can do?
one more scenario have observed, after adding following code in 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>
it working fine added ".active" class second last li,but after completing javascript function again ".active" class last li,i don't know why happen?
please let me know how can set ".active" class newly added li?
you can this:
var $li = $('<li id="li' + count + '"><a href="/#tab' + count + '"data-toggle="tab">new stream</a></li>'); // remove previous active li class $('li.active').removeclass("active"); // add active class new li $li.addclass("active");
Comments
Post a Comment