AngularJS Tab Örneği

Angular ile tab uygulaması, sıfır js kod ile 🙂

<body ng-app ng-init="tab = 'tab1'">
 
<div id="tab">
 
<ul class="tab">
<li ng-class="{active: tab == 'tab1'}">
<a href="#" ng-click="tab = 'tab1'">1. tab</a>
</li>
<li ng-class="{active: tab == 'tab2'}">
<a href="#" ng-click="tab = 'tab2'">2. tab</a>
</li>
<li ng-class="{active: tab == 'tab3'}">
<a href="#" ng-click="tab = 'tab3'">3. tab</a>
</li>
</ul>
 
<div ng-switch="tab">
<div class="tab-content" ng-switch-when="tab1">
1. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab2">
2. tab içeriği
</div>
<div class="tab-content" ng-switch-when="tab3">
3. tab içeriği
</div>
</div>
 
</div>
 
</body>

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s