JS函数在onclick事件中不可见

Question

Using ASP.NET + BootStrap 3 and trying to create tabs. Everything works fine except that I want that fine border to appear around the currently active tab. For this purpose I need to apply active class on that li (and remove active from other li elements). I'm trying to achieve that through the following simple JS function. But when I click a tab header, it tells me that the function activateTab() is not defined. Any clues?

<EditItemTemplate>
    <script type="text/javascript">
        function activateTab(tab) {
            $("#ItemTabs ul li").removeClass("active");
            $(tab).addClass("active");
        }
     </script>

    <div id="ItemTabs">
        <ul class="nav nav-tabs">
            <li><a href="#tab-Details" onclick="activateTab(this.parentElement);">Details</a></li>
            <li><a href="#tab-AdditionalInfo" onclick="activateTab(this.parentElement);">Additional Info</a></li>
            ...
        </ul>
    </div>
</EditItemTemplate>

NB: I'm not a seasoned web developer and may be reinventing the wheel here. Plz let me know if there is an easier way.

Answer 1

when javascript file is having some compile error , that time it gives these kind of problem. You can try with this :

from $("#ItemTabs ul li").removeClass("active") TO this 
      $('div#ItemTabs > ul li').removeClass('active')