탭은 현대 웹페이지에서 가장 일반적으로 사용되는 효과 중 하나라는 것을 알고 있습니다. 이번에는 Angularjs에서 mvvm 스타일 탭을 구현하는 방법을 보여 드리겠습니다. Case + code, 다음은 실제 사례이므로 살펴보겠습니다.
이 글의 초점은 매우 인기 있는 mvvm 프레임워크인angularjs를 사용하여 탭 효과를 구현하는 것입니다. 그 전에 일반적으로 사용되는 jquery 구현을 옮겨 보겠습니다.
1. jquery는 간단하고 투박한 탭 효과를 구현합니다
var nav = $(".tabs");//tab切换var box = $(".box");//容器nav.on("click", function(){ //点击事件 var this_index=$(this).index(); $(this).addClass("active").siblings().removeClass("active"); box.eq(this_index).show().siblings().hide(); });
여기에서는 js의 핵심 부분만 제공하고 html과 css에 대해서는 자세히 설명하지 않습니다.
위 코드는 간단하고 투박하게 탭 효과를 구현한 것입니다. 클릭 이벤트를 사용하여 elem.index()를 얻고, 인덱스와 컨테이너를 연결하여 표시 및 숨기기를 제어합니다.
2. Angularjs는 간단한 탭 효과를 구현합니다
Html 부분
<section ng-app="myApp"> <div class="tabs tabs-style" ng-controller="TabController as tab"> <nav> <ul> <li ng-class="{'current':tab.isSet(1)}"> <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li> <li ng-class="{'current':tab.isSet(2)}"> <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li> <li ng-class="{'current':tab.isSet(3)}"> <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li> <li ng-class="{'current':tab.isSet(4)}"> <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li> <li ng-class="{'current':tab.isSet(5)}"> <a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li> </ul> </nav> <div class="content"> <section id="section-1" ng-show="tab.isSet(1)"> <p>1</p> </section> <section id="section-2" ng-show="tab.isSet(2)"> <p>2</p> </section> <section id="section-3" ng-show="tab.isSet(3)"> <p>3</p> </section> <section id="section-4" ng-show="tab.isSet(4)"> <p>4</p> </section> <section id="section-5" ng-show="tab.isSet(5)"> <p>5</p> </section> </div> </div> </section>
css 부분(여기서는 Less 구문을 사용하는 편의를 위해 어린이가 CSS를 맞춤설정하여 맞춤 효과를 얻을 수 있습니다)
* { margin: 0; padding: 0; }body { background: #e7ecea; font-weight: 600; font-family: 'Raleway', Arial, sans-serif; text-align: center; }a { color: #2CC185; text-decoration: none; outline: none; &:hover { color: #74777b; } }.tabs { position: relative; width: 100%; margin: 30px auto 0 auto; nav { ul { position: relative; display: flex; max-width: 1200px; margin: 0 auto; list-style: none; flex-flow: row wrap; justify-content: center; li { flex: 1; &.current a { color: #74777b; } } } } a { display: block; position: relative; overflow : hidden; line-height: 2.5; span { vertical-align: middle; font-size: 1.5em; } } }.content { position: relative; section { /* display: none; */ margin: 0 auto; max-width: 1200px; &.content-current { /* display: block; */ } p { color: rgba(40,44,42, 0.4); margin: 0; padding: 1.75em 0; font-weight: 900; font-size: 5em; line-height: 1; } } }.tabs-style { nav { /* background: rgba(255,255,255,0.4); */ ul li { a { overflow: visible; border-bottom: 1px solid rgba(0,0,0,0.2); -webkit-transition: color 0.2s; transition: color 0.2s; } } ul li.current a{ &:after, &:before { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: solid transparent; } &:after { margin-left: -10px; border-width: 10px; border-top-color: #e7ecea; } &:before { margin-left: -11px; border-width: 11px; border-top-color: rgba(0,0,0,0.2); } } } }
js 부분
angular.module('myApp', []) .controller('TabController', function() { this.current = 1; this.setCurrent = function (tab) { this.current = tab; }; this.isSet = function(tab) { return this.current == tab; }; });
최종 효과 그림과 같이
위의 코드를 통해 구현의 핵심이Angularjs에 내장된 ng-class, ng-click, ng-show 명령어임을 알 수 있습니다. 평신도의 관점에서 보면 현재 데이터의 기본값은 컨트롤러에서 1로 정의됩니다. ng-click은 현재 데이터를 변경하기 위한 클릭 이벤트 사용자 정의 기능을 제공합니다. ng-class는 다음 값을 얻어서 현재 선택된 인덱스에 조건을 바인딩합니다. 현재 스타일을 추가하면 컨테이너도 컨트롤러에서 현재 데이터를 가져와서 ng-show 컨트롤을 통해 표시하고 숨깁니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:
다양한 vscdoe 버전으로 다양한 nodejs 버전을 디버그하는 방법
Vuejs webp는 이미지용 플러그인 개발을 지원합니다
위 내용은 Angularjs에서 mvvm 스타일 탭을 구현하는 방법은 무엇입니까? 케이스 + 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!