Question

If I add a navigation menu into a modal form, it seems that the active tab doesn’t show as active. Any suggestions?

<div id="log_data" title="Log data" class="modal fade hide" >  
<div class="modal-header">
    <button class="close" data-dismiss="modal">&times;</button>
    <h3>Log data</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="span2">
            <ul class="nav nav-tabs">
                <li id="ligraph" class="active"><a href="#">Graph</a></li>
                <li id="liraw"><a href="#">Raw</a></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

Apparently the modal removes the active class from the tabs. When I manually add the class to the tab using JQuery’s ‘on show’ event, it works.

$("#log_data").on("show", function (){
    $("#ligraph").addClass("active");
});