간단한 탭 메뉴를 얻기 위해 CSS를 정의하는 방법
사용자 3824049
위의 탭 메뉴에 대한 CSS를 가질 수 있습니까? 많은 시도를했지만 정확한 디자인을 얻지 못했습니다. 아래는 내 지시문, html 및 css 코드입니다.
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Content for Tab 1</p>
</div>
<div id="tabs-2">
<p>Content for Tab 2</p>
</div>
<div id="tabs-3">
<p>Content for Tab 3</p>
</div>
</div>
내 지시
app.directive('basictabs', function() {
return {
restrict: 'AE',
replace: true,
templateUrl :'app/partials/basictabs.html',
link: function(scope, elm, attrs) {
var jqueryElm = $(elm[0]);
$(jqueryElm).tabs();
}
};
});
내 CSS
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
니 디시 크리슈 난
당신은 사용하여 작업을 수행 할 수 있습니다 각도 - 부트 스트랩을 jQuery 플러그인을 사용하기위한 거치지 않고, 쉽게.
basictabs.html
<tabset>
<tab heading="Tab 1">
<p>Content for Tab 1</p>
</tab>
<tab heading="Tab 2">
<p>Content for Tab 2</p>
</tab>
<tab heading="Tab 3">
<p>Content for Tab 3</p>
</tab>
</tabset>
하지만 매우 구체적이고 JQuery UI를 사용하여이를 달성하려면 이것을 시도해보십시오.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://code.angularjs.org/1.0.3/angular.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="myCtrl">
<basictabs></basictabs>
</body>
</html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
HTML / CSS : 하위 메뉴의 ID를 얻는 방법
- 2
emacs : C 메이저 모드 : 탭 (\ t)을 항상 삽입하기 위해 Tab 키를 얻는 방법?
- 3
크롤러를 통해 간단한 정보를 얻는 방법
- 4
탭 메뉴를 만드는 방법
- 5
코드 오류를 줄이기 위해 메서드를 재사용하는 간단한 방법
- 6
CSS의 탭 메뉴-활성 탭을 설정하는 방법
- 7
NodeJS : 해당 기능을 실행 한 후 사용자 정의 CLI 메뉴를 다시 표시하는 방법
- 8
각도를 얻는 간단한 방법
- 9
HTML, PHP를 사용하여 간단한 하위 메뉴 만들기
- 10
이메일을 제출하기 위해 POST를 얻는 방법
- 11
캐싱을 피하기 위해 django의 정적 파일에 버전 번호를 할당하는 가장 간단한 방법은 무엇입니까?
- 12
HTML / CSS : 메뉴 내의 하위 메뉴. 버튼 중 하나는 기본 메뉴와 유사한 이벤트를 트리거해야합니다.
- 13
오류 상황에 맞는 메뉴를 얻기위한 Eclipse 단축키
- 14
최상위 메뉴를 2 단계 메뉴로 지정하고 최상위 메뉴에 고유 한 이름을 지정하는 방법은 무엇입니까?
- 15
특정 값을 얻기 위해 NSDictionary를 반복하는 방법
- 16
dojo tabContainer-포커스가없는 탭에 대해 마우스 오른쪽 버튼 클릭 팝업 메뉴에서 탭 ID를 얻는 방법
- 17
텍스트를 변경하기 위해 파일의 위치를 탭하는 방법이 있습니까?
- 18
다단계 데이터를 얻기 위해 쿼리를 작성하는 방법
- 19
인수를 확인하기 위해 if 문을 함수로 압축하는 간단한 방법이 있습니까?
- 20
Keras LSTM에 공급하기 위해 간단한 시리즈를 변환하는 방법은 무엇입니까?
- 21
연결하기 위해 내 dfs를 주문하는 간단한 방법을 찾고 있습니다.
- 22
필요한 NuGet 패키지를 복원하기 위해 MSBuild를 얻는 방법
- 23
날짜를 사용하여 데이터를 얻기 위해 PHP에서 시간을 설정하는 방법
- 24
Python의 새 탭에서 열기 위해 HTML 링크를 만드는 방법
- 25
Objective c의 탭 막대 컨트롤러에서 여러 하위 메뉴를 만드는 방법
- 26
하위 메뉴를 CSS / HTML5 메뉴와 동일한 너비로 만드는 방법
- 27
Windows 8 및 Ubuntu의 이중 부팅에서 OS를 선택하기 위해 Windows 8 부팅 메뉴를 얻는 방법은 무엇입니까?
- 28
이 스키마를 얻기 위해 메시지 계약을 정의하는 방법은 무엇입니까?
- 29
메인 winForm에서와 동일한 인덱스를 선택하기 위해 ListBox를 얻는 방법
몇 마디 만하겠습니다