本文主要和大家分享angularjs如何实现tab切换和选中切换，主要以代码的形式和大家分享，希望能帮助到大家。
nbsp;html>* { list-style: none; margin: 0; padding: 0; } .TabNav { height: 131px; position: relative; margin-left: 100px; margin-top: 100px; } .TabNav ul li { float: left; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#ededed)); border: 1px solid #ccc; padding: 5px 0; width: 100px; text-align: center; margin-left: -1px; position: relative; cursor: pointer; } .TabCon { position: absolute; left: -1px; top: 30px; border: 1px solid #ccc; border-top: none; width: 403px; height: 100px; } .TabNav ul li.active { background: #FFFFFF; border-bottom: none; } .TabNav ul li.active1 { background: #FFFFFF; } .box { width: 1000px; } .change { background: cyan; padding: 5px 10px; width: 100px; height: 40px; float: left; border: 1px solid #ddd; } .changed { background-color: cadetblue; border: 1px solid red; } var app = angular.module('app', []); app.controller('tabcontroller', function ($scope) { $scope.title = [{ 'name': 'tab1' }, { 'name': 'tab2' }, { 'name': 'tab3' }, { 'name': 'tab4' }] $scope.vm = [ { "list": "tab1", "con": "aaaaaaaaaaaaaaaaa" }, { "list": "tab2", "con": "bbbbbbbbbbbbbbbbb" }, { "list": "tab3", "con": "ccccccccccccccccc" }, { "list": "tab4", "con": "ddddddddddddddddd" } ]; //tab选项 var selected = $scope.selected; $scope.show = function (index) { $scope.selected = index; }; //按钮选中选项 var selected1 = $scope.selected1; $scope.show1 = function (index) { $scope.selected1 = index; }; });
- {{item.name}}
{{item.con}}{{item.name}}
登录后复制
相关推荐：
Vue2 tab切换选项卡的方法
微信小程序实现tab切换效果实例分享
JavaScript实现Tab切换的图文介绍
以上就是angularjs如何实现tab切换和选中切换的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2778247.html
