index.html

{% extends "base.html" %}
{% block title %}消息工具{% endblock %}

{% block content %}
    <style type="text/css">
        .link-tab {
            background-color:#e4e2dd;
        }
        .active_left_tab {
            background-color:#428BCA;
            color:white;
        }

        .table>thead>tr>th,.table>tbody>tr>td{
           _background-color:red;
        }
    </style>
    <!--   切换左边的tab  -->
    <script type="text/javascript">
        function swichLeftTab(e){
            var id = $(e).attr("id")
            if(id == "setting"){
                $(location).attr('href', "http://" + window.location.host + "/messageTools/msgSetting_view/msgSetting_page");
            }else if(id == "msg_send"){
                $(location).attr('href', "http://" + window.location.host + "/messageTools/message_view/heartBeat_msg_page");
            }else if(id == "car_simulater"){
                $(location).attr('href', "http://" + window.location.host + "/messageTools/M_simulater_view/M_simulater_page");
            }
        }
    </script>
    <!-- 左侧导航添加为可继承模块 -->
    {% block leftNav %}
    <div id="container1" class="col-sm-3 col-md-2 sidebar" style="margin-top:50px;width:15%;padding:0px;margin-right:15px;">
          <ul class="nav nav-sidebar">
              <li id="setting" onclick="swichLeftTab(this)"><a {% if arg.path[1]=="msgSetting_view" %} class="active_left_tab" {% endif %}><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 系统设置</a></li>
              <li id="msg_send" onclick="swichLeftTab(this)"><a {% if arg.path[1]=="message_view" %} class="active_left_tab" {% endif %}><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 终端消息发送<span class="sr-only"></span></a></li>
          </ul>
          <ul class="nav nav-sidebar" style="margin-top:20px;">
              <li id="car_simulater" onclick="swichLeftTab(this)"><a {% if arg.path[1]=="M_simulater_view" %} class="active_left_tab" {% endif %}><span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span></span> 车机模拟器</a></li>
          </ul>
    </div>
    {% endblock %}

    {% block content_01 %}
    <!--  右边内容区域  -->
    {% endblock %}
{% endblock %}
</div>