D:\ireport365\ireport365.war\template\connection\list.html 樣式 css ~~~ <style> .btn-default:hover{ background:#2990ea; color:#fff; border-color:#2990ea; } .modal-header>span{ float:right; margin-right:10px; } .tag_content_item{ /* display:inline-block; */ width:99px; height:90px; margin-top:10px; text-align:center; float:left; } .tag_content_item>img{ display:block; width:60px; height:60px; border-radius:5px; margin-left:19px; margin-bottom:10px; cursor:pointer; } li{ list-style: none; } .data_connection_tag{ width:100%; height:50px; padding:0px 4px; margin-top:20px; } .data_connection_tag>li{ display: inline-block; margin-left:15px; padding:5px 20px; border:1px solid #ddd; border-radius: 5px; cursor: pointer; } .data_connection_tag>.data_connection_tag_active{ background:#2990ea; color:#fff; border:1px solid #2990ea; } .data_connection_content{ width:100%; max-height:400px; overflow-y: auto; display:none; } </style> ~~~ html模板 ~~~ <script type="text/ng-template" id="connectionWholeModal.html"> <div class="data_connection" style="height:450px;"> <div class="data_connection_tag"> <li class="data_connection_tag_active">全部</li> <li>數據庫</li> <li>統計</li> </div> <div class="form-group"> <div class="col-md-8 conn-db-type-dropdown" style="height:44px;"> <ui-select ng-model="selectedDatasourceType" on-init="onDatasourceTypeObjChanged($select.selected)" theme="selectize" ng-disabled="disabled"> <ui-select-match> <span style="float:left;"><img ng-src="{{getContextPath()}}/images/dstype/{{$select.selected.name}}.png" style="width:30px;" /></span> <div style="float:left;padding-top:7px;margin-left:5px;">{{$select.selected.label}}</div> </ui-select-match> <ui-select-choices repeat="item in availableDatasourceTypes | filter: $select.search"> <img uib-tooltip="{{item.label}}" tooltip-placement="top" tooltip-append-to-body="true" ng-src="{{getContextPath()}}/images/dstype/{{item.name}}.png" style="width:60px;border:1px solid #f0f0f0;" /> </ui-select-choices> </ui-select> </div> </div> <div style="display:block;" class="data_connection_content"> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>數據庫</span> </div> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>微信</span> </div> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>百度</span> </div> </div> <div class="data_connection_content"> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>數據庫</span> </div> </div> <div class="data_connection_content"> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>微信</span> </div> <div class="tag_content_item"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1e982e0bbf24b9354bfcad67e297fc78_121_121.jpg"> <span>百度</span> </div> </div> </div> <div class="modal-footer" style="padding: 10px 15px;"> <button class="btn btn-default" ng-click="dismissWindow()">{{vsLang.cancel}}</button> </div> </script> ~~~ js選項卡代碼 ~~~ <script> $(document).on('click','.data_connection_tag>li',function(){ $('.data_connection_content').hide(); let _self = $(this); let index = _self.index(); $('.data_connection_tag>li').attr('class',''); _self.attr('class','data_connection_tag_active'); $('.data_connection_content').eq(index).show(); }) </script> ~~~ D:\ireport365\ireport365.war\js\enduser\home\connection.js ~~~ // 新添加的 e.openConnectionWholeWindow = function (j, k) { var l = null; // $('.testtest').show() var i = b.open({ templateUrl: "connectionWholeModal.html", controller: "ConnectionEditCtrl", scope: e, // size2: "lg", resolve: { param: function () { return { item: l } } } }); i.result.then(function (m) { e.data = []; e.loadData() }, function () {}); j.preventDefault(); j.stopPropagation() }; // end ~~~  以下效果 圖