选项卡

效果图：

HTML结构：

JavaScript结构：

源码：

 1     <div class="row dongtaiChooseBox">
 2         <div class="col-sm-6 col-xs-6 col-lg-6 text-center dongtaiByNo" ng-model="srhType" ng-click="chooseSrhType(0)"><span class="FontSize12">按航班号</span></div>
 3         <div class="col-sm-6 col-xs-6 col-lg-6 text-center dongtaiByCity" ng-model="srhType" ng-click="chooseSrhType(1)"><span class="FontSize12">按城市名</span></div>
 4     </div>
 5     <div class="row dongtaiCityBox" id="sub_city" style="display: none;">
 6         <div class="col-sm-5 col-xs-5 col-lg-5"><input class="CityInput FontSize18" type="text" ng-click="ChooseCityBtn(0);" id="startCity"></input></div>
 7         <div class="col-sm-2 col-xs-2 col-lg-2"><img src="img/AppImg01.png" class="img-responsive center-block Img_Mid"/></div>
 8         <div class="col-sm-5 col-xs-5 col-lg-5"><input class="CityInput FontSize18 text-right" type="text" ng-click="ChooseCityBtn(1);" id="endCity"></input></div>
 9     </div>
10     <div class="row dongtaiNoBox" id="sub_no">
11         <div class="col-sm-2 col-xs-2 col-lg-2"><span class="FontSize18">GJ</span></div>
12         <div class="col-sm-10 col-xs-10 col-lg-10"><input class="CityInput FontSize18" type="text" id="flightNum"></div>
13     </div>

html

 1     /**
 2      * 切换查询类型
 3      */
 4     $scope.srhType=0;
 5     $scope.chooseSrhType = function (v) {
 6         if(v==0){
 7             $(".dongtaiByNo").css("color","#FF0000");
 8             $(".dongtaiByCity").css("color","#333333");
 9             $('#sub_no').show();
10             $('#sub_city').hide();
11             $scope.srhType=0;
12         }else if(v==1){
13             $(".dongtaiByCity").css("color","#FF0000");
14             $(".dongtaiByNo").css("color","#333333");
15             $('#sub_city').show();
16             $('#sub_no').hide();
17             $scope.srhType=1;
18         }
19     };

ps：区别于ng-if可见