bootstrap3 html tab切换后。并切换hash 或者是说切换tab刷新数据

效果

每次切换tab 链接上面 对应的hash会发生变化

 

$('.nav-tabs li').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    var _id = $(this).attr('data-id');
    $('.tab-pane').find('#' + _id).addClass('active').siblings().removeClass('active');
    location.hash = _id;

});

tab-pane 是每个页面中的class

        <div class="tab-pane fade" id="tab_help">
            <div class="container">
                <h1>曾经购买过的课程找不到了</h1>
                网站近2019年10月29日之前过升级。该升级导致之前订单全部找寻不到了。<br>
                如果还有付款记录(最好是有付款记录,没有也能处理但是会比较麻烦)。或者是当时买过但是没有保存下来。<br>
                可以联系下方客服备注好【课程找不到了】提供课程id和帐号来处理。<br>
                之后会出一个订单查询功能。来通过支付宝或者微信的订单号。查询到相关的购买信息。<br>
                但是为了保证您的权益。建议您还是买了以后尽快保存
                <hr>
                <h1>关于课程列表</h1>

 

data-id 是li上面的属性  属性值和tab-pane id保持一致

        <li class="active"><a href="#tab_mydata" role="tab" data-toggle="pill">个人资料</a></li>
        <li data-id="tab_bought"><a href="#tab_bought"  role="tab" data-toggle="pill">我的购买</a></li>
        <li  data-id="tab_ollection"><a href="#tab_ollection" role="tab" data-toggle="pill">我的收藏</a></li>

        <li data-id="tab_openvip"><a href="#tab_openvip" role="tab" data-toggle="pill"><?php echo $vip ? "会员权益" : "开通会员" ?></a></li>
        <li data-id="tab_notice"><a href="#tab_notice" role="tab" data-toggle="pill">课程更新</a></li>
        <li data-id="tab_todo"><a href="#tab_todo" role="tab" data-toggle="pill">待办事项</a></li>
        <li data-id="tab_help"><a href="#tab_help" role="tab" data-toggle="pill">帮助</a></li>