1.今天的一点小总结
今天写前端的时候碰到了要使用导航条的情况,而使用nav-bar感觉自己不好控制,而且放在modal上不好看.就使用nav来进行.
modal页面如下:
@H_
404_6@
<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的效果.
效果图如下:
