记录：angularjs1.4 tab切换面板

最新推荐文章于 2022-05-11 00:26:40 发布

MangGit

最新推荐文章于 2022-05-11 00:26:40 发布

阅读量356

点赞数

分类专栏： angular 1

本文链接：https://blog.csdn.net/weixin_41599291/article/details/97657243

版权

angular 1 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果，点击按钮样式改变
在这里插入图片描述
html

<body ng-app="checkItemApp">
    <!-- 内容 -->
    <div class="content" ng-controller="checkItemController">
        <!-- 导航栏 -->
        <ul class="navTabList">
            <li class="navTabItem" ng-class="{'active':navTab==0}">
                <a href="" class="navTabLink" ng-click="changeNavTab(0)">按钮一</a>
            </li>
            <li class="navTabItem" ng-class="{'active':navTab==1}">
                <a href="" class="navTabLink" ng-click="changeNavTab(1)">按钮二</a>
            </li>
            <li class="navTabItem" ng-class="{'active':navTab==2}">
                <a href="" class="navTabLink" ng-click="changeNavTab(2)">按钮三</a>
            </li>
            <li class="navTabItem" ng-class="{'active':navTab==3}">
                <a href="" class="navTabLink" ng-click="changeNavTab(3)">按钮四</a>
            </li>
        </ul>
        <!-- 内容 -->
        <div ng-show="navTab==0">            
 			按钮一
        </div>
        <div ng-show="navTab==1">
            按钮二
        </div>
        <div ng-show="navTab==2">
            按钮二
        </div>
        <div ng-show="navTab==3">
            按钮三
        </div>
    </div>
</body>

// 创建angular模块
var checkItemApp = angular.module("checkItemApp",[]);
checkItemApp.controller("checkItemController",function($scope){
	// tab默认选中
    $scope.navTab=0;
    // 切换标签
    $scope.changeNavTab = function(navTab){
        if(navTab == 0){
            $scope.navTab=0;
            console.log(0)
        }else if(navTab == 1){
            $scope.navTab=1;
            console.log(1)
        }else if(navTab == 2){
            $scope.navTab=2;
            console.log(2)
        }else if(navTab == 3){
            $scope.navTab=3;
            console.log(3)
        }        
    }
})

样式

.navTabItem{
    font-size: 16px;
    font-weight: bold;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
}
.navTabLink{
    display: block;
    position: relative;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.navTabLink::before{
    content: "";
    position: absolute;
    bottom: -2px;
    width: 0;
    left:0;
}
.active{
    border-bottom:solid 2px #28a3ef;
}
.navTabList>li.active>a{
    color:#28a3ef;
}
.navTabLink:hover{
    color:#28a3ef;
}
.navTabLink:hover:before{
    width:100%;
}
.navTabLink:before{
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
}

MangGit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录：angularjs1.4 tab切换面板

效果，点击按钮样式改变html<body ng-app="checkItemApp">  <div class="content" ng-controller="checkItemController">  <ul class="navTabLi...
复制链接

扫一扫

专栏目录