Change class of li on Anchor link click using jQuery

<div>
    <ul class="tabs">
        <li class="active"><a href="#interview" data-toggle="tab">Scheduled Interview
            <asp:Label ID="lbldate" runat="server" Text=""></asp:Label>&nbsp;<asp:Label ID="lblintcount"
                runat="server" Text=""></asp:Label></a> </li>
        <li><a href="#selection" data-toggle="tab">Selected Candidates
            <asp:Label ID="lblselected" runat="server" Text=""></asp:Label></a> </li>
        <li><a href="#feedback" data-toggle="tab">Feedback Awaited
            <asp:Label ID="lblfeedbackawaited" runat="server" Text=""></asp:Label></a> </li>
    </ul>
</div>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    .active
    {
        background-color: Aqua;
    }
</style>
<script type="text/javascript">
    $(function () {
        $('.tabs li').click(function () {
            $('.tabs li').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>