bootstrap导航条 标签页怎么高亮当前选中项

问题描述:bootstrap nav-tabs怎么选中当前项active属性

为什么使用js或者jquery 如下设置class和移除class active属性后，还是无反应？或者点一下就变回去了？

<li role="presentation" class="roleText active" id="roleText">
     <a here ="http://www.it399.com/" onclick="changeToText();" >文本</a></li>
<li role="presentation" class="roleNetUrl" id="roleNetUrl">
     <a  here ="http://www.it399.com/" onclick="changeToNetUrl();" >网址</a></li>
<!-- <li role="presentation" class="">
     <a href="http://www.it399.com/">在线助手-你的在线工具箱</a></li>-->

<script type="text/javascript">
    function changeToText(){
        //移除选中
        $('#roleNetUrl').removeClass("active"); 
        $('#roleText').removeClass("active"); 
       //设置选中
        $('#roleText').addClass("active");

    }

</script>


<script type="text/javascript">
    function changeToNetUrl(){
            //移除选中
            $("#roleText").removeClass("active");
            $('#roleText').removeClass('active');
            $('#roleNetUrl').addClass('active');
            //设置选中
    }

</script>

后面发现是a标签的herf属性定位到了 在线助手 首页:http://www.it399.com

这样点击的时候就会刷新页面，所以设置的效果就看起来一闪而过，又恢复到了之前的状态。

如果点击标签页不需要跳转页面，那么去掉herf即可。其它首页导航以此类推。点此可以查看效果:艺术彩色二维码在线生成-在线助手,你的在线工具箱!