Pure AngularJS Tabs

Developer
Hélio Marcondes
Size
2,067 Kb
Views
14,168
  1. Pure AngularJS Tabs Previews
  2. Pure AngularJS Tabs HTML Codes
  3. Pure AngularJS Tabs CSS Codes

How do I make an pure angularjs tabs?

Easy tabs using angularjs. What is a pure angularjs tabs? How do you make a pure angularjs tabs? This script and codes were developed by Hélio Marcondes on 09 November 2022, Wednesday.

Pure AngularJS Tabs Previews
IQ Test

Pure AngularJS Tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure AngularJS Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" ng-app ng-init="tab=1"> <ul class="tabs-nav"> <li><a ng-click="tab=1" ng-class="{'active':tab==1}">Tab 1</a></li> <li><a ng-click="tab=2" ng-class="{'active':tab==2}">Tab 2</a></li> <li><a ng-click="tab=3" ng-class="{'active':tab==3}">Tab 3</a></li> </ul> <div class="tabs-container"> <div class="tab-content" ng-show="tab==1"> <h2>First Tab Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores laborum doloribus iusto quaerat dicta nemo aperiam. Voluptas repudiandae, enim, illum perspiciatis harum officia inventore iusto fugit, repellat asperiores maiores.</p> </div> <div class="tab-content" ng-show="tab==2"> <h2>Second Tab Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores laborum doloribus iusto quaerat dicta nemo aperiam. Voluptas repudiandae, enim, illum perspiciatis harum officia inventore iusto fugit, repellat asperiores maiores.</p> </div> <div class="tab-content" ng-show="tab==3"> <h2>Third Tab Header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero dolores laborum doloribus iusto quaerat dicta nemo aperiam. Voluptas repudiandae, enim, illum perspiciatis harum officia inventore iusto fugit, repellat asperiores maiores.</p> </div> </div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
</body>
</html>

Pure AngularJS Tabs - Script Codes CSS Codes

* {margin: 0; padding: 0; box-sizing: border-box;}	body { background-color: #fff;	font: 13px Arial, Tahoma, sans-serif;	}	.container {	padding: 50px;	max-width: 900px;	margin: auto;	}	.tabs-nav {padding: 20px 0 0; list-style: none;}	.tabs-nav li {display: inline;}	.tabs-nav a {	display:inline-block;	border: 1px solid #ddd;	border-bottom: none;	padding: 15px;	cursor: pointer;	border-radius: 5px 5px 0 0;	font-size: 14px;	color: #fff;	background: rgba(20, 144, 64, 0.7);	}	.tabs-nav .active {	background: #fff;	color: rgba(20, 144, 64, 0.7);	border-bottom: 1px solid #fff;	margin-bottom: -1px;	}	.tab-content {	border: 1px solid #ddd;	padding: 20px;	}	p {	margin-bottom: 15px;	}
Pure AngularJS Tabs - Script Codes
Pure AngularJS Tabs - Script Codes
Home Page Home
Developer Hélio Marcondes
Username haykou
Uploaded November 09, 2022
Rating 3
Size 2,067 Kb
Views 14,168
Do you need developer help for Pure AngularJS Tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hélio Marcondes (haykou) Script Codes
Name
Multi step form
Introduction to three.js
Custom scrollbar crossbrowser
Simple search using AngularJS
Text on fire
Skill Bar with Jquery
Search button expanding input submit
Bootstrap Menu with Effect
Flip CSS Animation with Logo
Simple Jquery Slider
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!