1.今天的一点小总结

今天写前端的时候碰到了要使用导航条的情况,而使用nav-bar感觉自己不好控制,而且放在modal上不好看.就使用nav来进行.
modal页面如下:

<div role="navigation" ng-init="other_hide=true">
    <div class="modal-header" role="navigation">
        <h4 class="modal-title">表</h4>
        <ul class="nav nav-tabs">
            //class="active"默认显示一个head
            <li class="active">
              //注意这里的onclick,因为我这里的href只是转换下面的tab页,onclick不需要起作用,所以直接return false,这样可以防止modal外的页面被重置了.
              //如果需要onclick功能,那么这么写 onclick="yourfunction(); return false"即可.
                <a href="#detail_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">详细信息</a>
            </li>
            <li>
                <a href="#other_info" onclick="return false;" style="color: #0059b3" data-toggle="tab">配置</a>
            </li>
        </ul>
    </div>


    <div class="tab-content">
        //注意这里的in active,之前一直不知道怎么默认显示一个tab.还用上了ng-hide,白费力气,查了好半天才查到. 
        <div class="modal-body tab-pane fade in active" style="margin-top: 1px" id="detail_info">
            一个tab
        </div>

        <div class="modal-body tab-pane fade " id="other_info">
            另一个tab
        </div>
    </div>


    <div class="modal-footer">
        <button class="btn btn-success" type="button" ng-click="save()">保存</button>
        <span style="margin-left: 20px"></span>
        <button class="btn btn-default" type="button" ng-click="ok()">返回</button>
    </div>
</div>

值得注意的两点在注释里面有.

• 注意a标签里面的onclick,这样可以防止modal外的页面被重置了.如果需要onclick功能,那么这么写 onclick=”yourfunction(); return false”即可.
• 注意in active,查了好半天才查到.
  不需要任何的js代码就能够实现这样点击tab的效果.
  效果图如下: