Home > Developer > JavaScript
AngularJS implements two tabs: angularjs
1. Use common commands to implement tabs
<Link rel = "stylesheet" href = "views/show/tab.css"/> <div> <ul class = "nav-tabs" ng-init = "vm. activeTab = 1 "> <li ng-class =" {active: vm. activeTab = 1} "> <a href =" javascript:; "ng-click =" vm. activeTab = 1 "> label 1 </a> </li> <li ng-class =" {active: vm. activeTab = 2} "> <a href =" javascript:; "ng-click =" vm. activeTab = 2 "> label 2 </a> </li> </ul> <div class =" tab-content tab-bordered "> <div class =" tab-panel "ng-show =" vm. ActiveTab = 1 "> content of tag 1 </div> <div class =" tab-panel "ng-show =" vm. activeTab = 2 "> content of tag 2 </div>
Ii. tabs for custom command implementation
<!DOCTYPE html>
(1) first, the instruction must be written in a root tag and must be wrapped in a div.
(2) The ng-model must be used to declare variables for external Transmission Parameters of commands,
Use scope :{
Value: 'ngmodel'
} To assign values
Summary
The above is all about how AngularJS implements tabs. I hope this article will be helpful for you to learn and use AngularJs. If you have any questions, please leave a message.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
