Angular实现tab切换

实现标签切换功能，即如上图，通过控制标签选中状态，下面表格随之变动。

首先，所有tab标签是一个html页面。下面不同表格是一个html界面。并分别对应一个js文件。暂时命名为，parent.html、parent.js、child1.html、child2.html。在parent.html中通过include一个变量控制加载child1.html。

<div oc-lazy-load='eca/designer/visual/vismod/ecavismod.js' class="fill-container"><div ng-controller="ctrVismod" class="fill-container"><div style="height:50px;float:left;width:100%"><div class=" hidden-xs" style="overflow-x: auto;height: 50px;"><ul class="nav navbar-nav navbar-left vismodNav" style="min-width:900px;"><li class="vismodOn"><a ng-click="Tree()">图层树</a></li><li><a ng-click="Toolbar()">工具栏</a></li><li><a ng-click="Fasttips()">快速查询</a></li><li><a ng-click="Space()">空间查询</a></li><li><a ng-click="Topic()">专题图</a></li><li><a ng-click="ordinate()">坐标系</a></li><li><a ng-click="Compliance()">合规性检查</a></li><li><a ng-click="Conflict()">冲突分析</a></li><li><a ng-click="basemap()">底图配置</a></li><li><a ng-click="Stantbook()">多规台账</a></li><li><a ng-click="layerCut()">图层切换</a></li></ul></div></div><div ng-include="vismodbtn"></div></div>
</div>

在parent.js中通过指定定函数，并给include指定的变量付child.html地址来确定加载其中的child.html。

define(['eca-core','ui-router'],function () {var appModule = angular.module('eca.ecaVismod', ['ui.router']);appModule.controller('ctrVismod',['$scope',function  ($scope) {//默认打开$scope.vismodbtn="eca/designer/visual/vismod/vismodTree/vismodTree.html";
//      工具栏$scope.Toolbar=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vistoolbar/vismodtool.html";}//快速查询$scope.Fasttips=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vismodfast/vismodFast.html";}//图层树配置$scope.ordinate=function  () {$scope.vismodbtn="eca/designer/visual/vismod/coordinate/coordinate.html";}//图层树配置$scope.Tree=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vismodTree/vismodTree.html";}//空间查询配置$scope.Space=function  () {$scope.vismodbtn="eca/designer/visual/vismod/visSpatialQuery/vismodSpace.html";}//专题图配置$scope.Topic=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vismodTopic/vismodTopic.html";}//合规性检查配置$scope.Compliance=function  () {$scope.vismodbtn="eca/designer/visual/vismod/visCompliance/visCompliance.html";}//冲突分析配置$scope.Conflict=function  () {$scope.vismodbtn="eca/designer/visual/vismod/visConflict/visConflict.html";}       //多规台账$scope.Stantbook=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vismodMany/vismodMany.html";}//底图配置$scope.basemap=function  () {$scope.vismodbtn="eca/designer/visual/vismod/basemap/basemap.html";}//图层切换$scope.layerCut=function  () {$scope.vismodbtn="eca/designer/visual/vismod/vislayerCut/layerCut.html";}//切换选项$('.vismodNav li').click(function  () {$('.vismodOn').removeAttr("class");$(this).attr('class','vismodOn')})}])})

Angular实现tab切换相关推荐

原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...
微信小程序顶部tab切换以及滑动
效果图图片如下实现代码xml中 <view class="swiper_tab_view"><scroll-view scroll-x='true' scrol ...
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
javascript tab切换类LixTabs最新版
javascript Tab切换类LixTabs,更新至0.5版: 受snandy的"读jquery"系列的启发,改进了代码,现在调用LixTabs时不用加new了.即可以这样写: ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
element,点击查看，实现tab切换：
点击查看,实现tab切换: 代码如下: <template><div><el-table :data="tableData" style=" ...
javascript回车完美实现tab切换功能
javascript回车完美实现tab切换功能 javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过exce ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

Angular实现tab切换

Angular实现tab切换相关推荐

最新文章

热门文章