bootstrap tabs

bootstrap 的tab 改造，bootstrap的tab只有一个nav 的案例，但是我们很多时候写的tab并不是在nav里，所以我就去除了nav-tabs ，直接改成tabs 发现还是能实现效果，代码如下

<div class="tabs btn-group btn-group-lg btn-group-justified" role="tablist">
                    <a data-toggle="tab" role="tab" aria-controls="gkkt" class="btn btn-info active" href="#gkkt">客厅</a>
                    <a data-toggle="tab" role="tab" aria-controls="gkct" class="btn btn-info" href="#gkct">餐厅</a>
                    <a data-toggle="tab" role="tab" aria-controls="gksf" class="btn btn-info" href="#gksf">书房</a>
                    <a data-toggle="tab" role="tab" aria-controls="gkwsj" class="btn btn-info" href="#gkwsj">卫生间</a>
                    <a data-toggle="tab" role="tab" aria-controls="gkws" class="btn btn-info" href="#gkws">卧室</a>
            </div>
            <ul class="tab-content tabCon">
                <li role="tabpanel" class="fade in active tab-pane" id="gkkt">
                    <img src="./images/taocan/001kt.png" alt="老房客厅装修图">
                </li>
                <li role="tabpanel" class="fade tab-pane" id="gkct">
                    <img src="./images/taocan/002ct.png" alt="老房餐厅装修图">
                </li>
                <li role="tabpanel" class="fade tab-pane" id="gksf">
                    <img src="./images/taocan/003cf.png" alt="老房书房装修图">
                </li>
                <li role="tabpanel" class="fade tab-pane" id="gkwsj">
                    <img src="./images/taocan/004wsj.png" alt="老房卫生间装修图">
                </li>
                <li role="tabpanel" class="fade tab-pane" id="gkws">
                    <img src="./images/taocan/005ws.png" alt="老房卧室装修图">
                </li>
            </ul>

但是发现按钮并没有自己出现选中的状态，于是自己用jQuery自己写的

        $('.tabs .btn').click(function () {
            if ($(this).hasClass('active')) {
                return false;
            }
            $('.tabs .btn').removeClass('active');
            $(this).addClass('active');
        });

这样一个完整的tab就成型了；

附上图片

基本就是这个样式了