논리적으로 z- 인덱스 내려 받기

간단한 탐색 경로가 있습니다. 위의 코드와 같이 div의 각 링크에 JQuery가 내림차순 Z- 인덱스를 지정할 수 있습니까? 현재 Z- 색인이없는 링크를 인쇄하므로 잘못 보입니다.논리적으로 z- 인덱스 내려 받기

How I want it to look

은 현재 보이는 방법 :

enter image description here

CSS

는 CSS에서 유일한 핵심 선수는 위치

있습니다

나는 그것을보고 싶지 방법 여백은 남았지 만 전체적으로 여기에 있습니다.

당신이 .each()와 루프 않으려면,

$($('#crumbs > a').get().reverse()).css('z-index', function(index) { 
    return index+1; 
});

을 또는 :

#crumbs a { 
    display: inline-block; 
    position: relative; 
    padding: .5em 1em; 
    background: #e3e3e3; 
    border: 1px solid #c9c9c9; 
    box-shadow: inset 0px 1px 0px #f6f6f6; 
    border-radius: 1em 2em 2em 1em; 
    margin-left: -.6em; 
}

출처

2012-06-27 Jeremy Hewitt

감사 메이트, CSS가 추가되었습니다 : –

상태 업데이트 거의 쓸모가 : CSS 및 자바 스크립트하는 경우는 다음 적절한 비활성화 파 llbackbreadcrumbs이 발생합니다.

참조 : 사용 CSS와 자바 스크립트의 jsFiddle

스크린 샷 : CSS와 자바 스크립트 장애인의

스크린 샷 :

추가하십시오 CSS3 버전이 허용하는 경우, 나는이 SO Answer에 화살표가있는 버전을 만들기 위해 영감을했다.

편집 : Simon Sarris에 의해 대체 스타일

추가 jsFiddle.

출처

2012-06-27 02:55:52 arttronics

가치있는 것 같아, 순수 CSS 수정. 그러나 HTML에서 * breadcrumb 링크 *를 역순으로 사용하는 것은 매우 나쁜 생각입니다 (접근 가능성 및 SEO에 대한 가능성도 있음). – thirtydot

안녕하세요 불행히도 이것은 우리의 접근성 요구 사항을 충족시키지 못했지만 어쨌든 갈 시간을내어 주셔서 감사합니다 :) –

꽤 똑바로 앞으로 동료, 부스러기를 읽고 화면 리더를 상상해, 그것이 마지막으로 시작됩니다 하나는 먼저 읽은 다음 뒤쪽으로 읽습니다. 호주 정부 웹 사이트는 특정 유용성 표준을 충족해야합니다. 사용자가 CSS를 사용하지 않으면 페이지에 기본 부스러기가 인쇄됩니다. 즉. 항목 1> 항목 2> 항목 3. 항목 3> 항목 2> 항목 1 –

이처럼 할 수있는이 작업을 위해, 당신이해야한다는

$($('#crumbs > a').get().reverse()).each(function(index) { 
    $(this).css('z-index', index+1); 
});

주 a 요소에 position: relative이 있는지 확인하십시오. Z- 인덱스를 배치하지 않고

출처

2012-06-27 01:54:48 thirtydot

덕분에 짝짓기, 즉, 각 링크에 Z- 인덱스를 할당 한 후 Z- 인덱스 순서를 반대로 무엇입니까? 그냥 링크가 현재 * no * z-index로 인쇄했기 때문에 확인 만하면됩니다. 나는 그들에게 z- 인덱스를 할당 할 수 있지만 모든 링크에 대해 동일한 z- 인덱스가 될 것입니다 :/ –

네, 이것은 당신이 원하는 것입니다. – thirtydot

그래, CSS 위치 : 상대적으로, 나는 Z- 인덱스를 사용하는 방법을 안다, 고마워. :) 여전히 스크립트를 페이지에 적용하면 Z- 인덱스가 소스에 생성되지 않으므로 잘못 구현해야합니다. 아이디어를 가져 주셔서 감사합니다. 다른 방법을 시도해 보겠습니다 :) –

는

<div id="crumbs"> 

    <a href="#" style="position:relative;z-index: 4;">Workplace Standards</a> &#62; 
    <a href="#" style="position:relative;z-index: 3;">Resources</a> &#62; 
    <a href="#" style="position:relative;z-index: 2;">Guides</a> &#62; 
    <a href="#" style="position:relative;z-index: 1;">Public holidays</a> 

</div>

Example

MDN

출처

2012-06-27 02:13:38 Musa

감사하지만 위치가 정당한 이유로 CSS에서 처리됩니다. 사용자가 CSS를 비활성화하면 부스러기가 전통적으로 인쇄됩니다. 항목> 항목> 항목 –

논리적으로 z- 인덱스 내려 받기

답변

관련 문제