선택한 탭 강조 표시

-2

나는 angularJs 및 부트 스트랩 응용 프로그램을 작성 중입니다. 현재 angularJS를 사용하여 탭을 만드는 중입니다. 강조 표시된 탭이 선택되었음을 사용자가 쉽게 인식 할 수 있도록 선택한 탭을 강조 표시하려고합니다. 선택한 탭을 색상 # FBDFD9로 강조 표시하는 방법을 제안하십시오. http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview 선택한 탭 강조 표시

샘플 HTML 코드 :

<div ng-controller="TabsParentController"> 
    <tabset> 
     <tab ng-repeat="workspace in workspaces" 
      heading="{{workspace.name}}" 
      active=workspace.active> 
      <div ng-controller="TabsChildController"> 
       <div> 
        {{$parent.workspace.id}} : {{ $parent.workspace.name}} 
       </div> 
       <input type="text" ng-model="workspace.name"/> 
      </div>  
     </tab> 
     <tab select="addWorkspace()"> 
      <tab-heading> 
       <i class="icon-plus-sign"></i> 
      </tab-heading> 
     </tab> 
    </tabset> 
</div>

--EDIT--

이 탭의 윤곽을 표시하는 방법을 제안 해주세요

이 탭을 표시 할 수있는 소재 기존 작업 코드를 찾아주세요. 여러 개의 탭이있는 경우 해당 탭을 나타내는 윤곽선이없는 텍스트처럼 나타납니다. 출력이 http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview으로 표시되면 선택한 탭에 대해서만 탭 개요가 표시됩니다. 모든 탭 (활성 탭 및 비활성 탭)의 윤곽을 표시하는 방법에 대해 조언하십시오. 솔루션을 찾으려고했지만 적절한 외부 ID 또는 클래스 이름을 찾아서 css 코드를 작성하여 탭의 바깥 줄을 표시하지 못했습니다.

출처

2016-12-01 javaUser

Chrome에서 HTML을 검사하여 활성 CSS 스타일을 지정하기 위해 어떤 CSS 셀렉터가 부트 스트랩에서 사용되고 있는지 확인했습니다. 그래서 당신의 CSS에서 대상,

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus { 
    background-color: #FBDFD9; 
}

출처

2016-12-01 16:54:22

부트 스트랩 활성 탭으로 active 클래스를 추가합니다 :이 규칙을 추가 할 CSS를 수정 선택기 .nav-tabs>.active>a의 특이성 이후

.nav-tabs>.active>a { 
    background-color: #FBDFD9; 
}

하는 것은 동일하다 부트 스트랩의 선택,의 특이성은 당신의 스타일을 무시하거나 !important

.nav-tabs>.active>a { 
    background-color: #FBDFD9; !important; 
}

를 사용하거나 사용자 지정 스타일이 선미 배치해야합니다 index.html에서 어 부트 스트랩의 :

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="index.css">

여기 working example입니다.

출처

2016-12-01 16:54:47

선택한 탭 강조 표시

답변

관련 문제