bootstrap nav nav-tabs 选项卡 的使用实例

通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

 <ul class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">公告</a>
        </li>
        <li><a href="#order" data-toggle="tab">工单</a></li>
        <li>
            <a href="#knowledge" data-toggle="tab">知识库</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <div style="padding:10px;">
                <div class="list-group">
                    <a class="list-group-item">
                        <span class="badge">1</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">2</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">3</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">4</span>
                        Cras justo odio
                    </a>
                </div>
                <div class="alert alert-danger" role="alert">
                    <a href="javascript:void(0);" class="alert-link">没有消息了！</a>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="order">
            <div style="padding:10px;">
                <div class="list-group">
                    <a class="list-group-item">
                        <span class="badge">2016-10-19</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">2016-10-19</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">2016-10-19</span>
                        Cras justo odio
                    </a>
                    <a class="list-group-item">
                        <span class="badge">2016-10-19</span>
                        Cras justo odio
                    </a>
                    <div class="alert alert-danger" role="alert">
                        <a href="javascript:void(0);" class="alert-link">没有消息了！</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="knowledge">
            <div style="padding:10px;">
                <div class="list-group" id="div_listKL">
                    <div class="alert alert-danger" role="alert">
                        <a href="javascript:void(0);" class="alert-link">没有消息了！</a>
                    </div>
                </div>
            </div>
        </div>
    </div>