选项卡

效果图：

HTML结构：

JavaScript结构：

源码：

    <div class="row dongtaiChooseBox">
        <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>
        <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>
    </div>
    <div class="row dongtaiCityBox" id="sub_city" style="display: none;">
        <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>
        <div class="col-sm-2 col-xs-2 col-lg-2"><img src="img/AppImg01.png" class="img-responsive center-block Img_Mid"/></div>
        <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>
    </div>
    <div class="row dongtaiNoBox" id="sub_no">
        <div class="col-sm-2 col-xs-2 col-lg-2"><span class="FontSize18">GJ</span></div>
        <div class="col-sm-10 col-xs-10 col-lg-10"><input class="CityInput FontSize18" type="text" id="flightNum"></div>
    </div>

    /**
     * 切换查询类型
     */
    $scope.srhType=0;
    $scope.chooseSrhType = function (v) {
        if(v==0){
            $(".dongtaiByNo").css("color","#FF0000");
            $(".dongtaiByCity").css("color","#333333");
            $('#sub_no').show();
            $('#sub_city').hide();
            $scope.srhType=0;
        }else if(v==1){
            $(".dongtaiByCity").css("color","#FF0000");
            $(".dongtaiByNo").css("color","#333333");
            $('#sub_city').show();
            $('#sub_no').hide();
            $scope.srhType=1;
        }
    };

ps：区别于ng-if可见