CSS의 화살표가있는 Jquery UI 탭 탐색

안녕하세요 저는 Jquery UI Tab Navigation의 활성 상태에서 아래 화살표를 이렇게 만들려고합니다.CSS의 화살표가있는 Jquery UI 탭 탐색

enter image description here

은 현재 아래쪽 화살표없이 잘 작동합니다. 나는이 흙 받이 Jquery UI Tab with Arrow을 보았지만, 내 HTML div 클래스에는 li 요소에 대해 "활성"클래스가 없습니다. 누군가가 친절하게 나에게 이것에 대한 해결책이 될 것이라고 조언 할 수 있습니까? 고맙습니다!

<div class="menuArea"> 
     <ul> 
     <li><a href="#activeTap" data-tab-name="activeTab">ACTIVE</a></li> 
     <li><a href="#inactiveTap" data-tab-name="inactiveTab">INACTIVE</a></li> 
     </ul> 
    </div>

다음은 jquery ui-tabs 용 CSS입니다.

.ui-tabs { 

    background-color: #ffffff; 
    padding-bottom: 10px; 
} 
.ui-tabs-nav { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 35px; 
    background:url("../images/gradient_default.gif") repeat-x; 
} 
.ui-tabs-nav li { 
    width: 150px; 
    text-align: center; 
    list-style: none; 
    float: left; 
    margin: 0px 0px 0px 0px; 
    padding: 3px; 
} 

.ui-tabs-active { 
    background:url("../images/gradient_active.gif"); 
    font-weight:bold; 
} 

.ui-tabs-active a { 
    color:#fff; 
}

출처

2013-07-12 user1781367

두 가지 가능한 해결책이 있습니다.

1) 활성 링크에 대한 배경 이미지의 화살표 부분을 만들 수 있습니다. 이것은 아마도 CSS에 개조가 필요할 것입니다.

2) img 태그를 사용하여 상대적으로 위치를 지정하여 a 안에 화살표를 포함 할 수 있습니다. 당신이 걱정하는 경우 - -

<a href="#activeTap" data-tab-name="activeTab">ACTIVE<img src="path/to/arrow.png" /></a>

position:relative; 
top:/*some value*/; 
left:/*some value*/;

이의 단점

는 CSS 배경 이미지와 IMG를 사용하여 의미 혼동 될 것입니다.

출처

2013-07-12 17:59:43 Dolchio

죄송 합니다만 말씀하신 내용을 완전히 이해하지 못했습니다. 사용자가 비활성 탭을 클릭하면 어떻게 작동합니까? 그 상태의 화살표도 나타 납니까 ?? – user1781367

CSS의 화살표가있는 Jquery UI 탭 탐색

답변

관련 문제