Jquery Rounded Tabs 크로스 브라우저 (약간의 문제)

필자는 모든 브라우저에서 작동하는 이미지가없는 둥근 탭을 만들려고했는데, 다른 곳에서 다양한 코드를 가져 와서 거의 작동 시켰습니다. 유일한 문제는 탭 배경색 탭이 활성 상태 일 때 흰색을 유지하지 않습니다. 필자는 행운으로 몇 시간 동안이 문제를 해결하려고 노력해 왔습니다. 그것은 둥근 모서리에 대한 csspie를 사용하여, 당신은 여기 페이지에서 예를 볼 수 있습니다 Jquery Rounded Tabs 크로스 브라우저 (약간의 문제)

http://www.usedcar.co.uk/testtabs.html

어떤 도움

주시면 감사하겠습니다. 나는 이미지없이 jquery 탭의보기 흉한 예제를 찾을 수 없었다.

출처

2011-04-14 mark33

당신은 모든 브라우저 또는 특정 사람이 문제가 있습니까? – wdm

최근 가장 큰 고객 (Fortune 500 유형)은 Jquery UI 탭이 IE6/7의 해당 luddite에 대해 정사각형으로 정상적으로 저하되는 것에 만족했습니다. 그것은 이미지를 사용하는 것보다 훨씬 더 깔끔한 솔루션이며, 사물의 거대한 계획에서 실제로 중요하지 않은 두 브라우저의 해킹보다 훨씬 적은 오버 헤드입니다. 소수의 사용자가 라운드 대신 사각형을 보는 경우 실제로 손실이 발생합니까? 나는 실제로 눈치 채지 못한 소수의 사용자와의 차이점을 지적해야했습니다. 그냥 sayin ' – bpeterson76

왜 jQuery UI의 [탭] (http://jqueryui.com/demos/tabs/)을 사용하지 않습니까? [ThemeRoller] (http://jqueryui.com/themeroller/)를 사용하여 원하는대로 스타일을 적용 할 수 있으며 브라우저 간 호환이 가능하고 멋지게 성능이 저하됩니다 (@ bpeterson76). –

클릭 이벤트 또는 css (좋으면 css)로 수정할 수 있습니다. 클릭 : 당신의 CSS에서

.selected a{background-color: white;}

같은

$('.selected a').css('background-color', 'white');

또는 CSS에서 뭔가 당신은 :

.tabBox .tabs .selected a { 
    background: #FFF; 
}

EDIT (귀하의 CSS 행동 'PIE.htc는'당신의 원인이되는 문제를) : 클릭하면 마지막에 추가 :

$(".tabBox .tabs li").click(function() { 
    $(".tabBox .tabs li").removeClass("selected"); //Remove any "active" class 
    $(this).addClass("selected"); //Add "active" class to selected tab 
    $(".tabBox .content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
      $(activeTab).show(); 
//add--> 
    **$(".tabBox .tabs").find('li[class!=selected]').find('a').css('background-color', '#EEE'); 
    $(this).find('a').css('background-color', '#FFF');** 

    return false; 
});**strong text**

출처

2011-04-14 15:09:35 ChrisThompson

안녕하세요, 필자는 이것을 바꿔 파이어 폭스와 크롬에서 잘 작동하도록했습니다. 그러나 IE7에서는 새 탭을 클릭 할 때마다 이전 탭이 흰색으로 유지되고 회색 색상으로 돌아 가지 않습니다. – mark33

당신의 a : active와 당신의 .selected a의 순서를 바꾸십시오. – ChrisThompson

Ive가 약간의 변경을 가했을 때 새로운 것이 아래 페이지에 있습니다 : http://www.usedcar.co.uk/testtabs2.html, the 문제는 IE8에서 새 탭을 클릭 할 때마다 이전 탭의 배경이 회색으로 돌아 가지 않고 흰색으로 유지된다는 것입니다. – mark33

.tabBox .tabs a:hover, 
.tabBox .tabs a:active, 
.tabBox .tabs .selected a { 
    background: none repeat scroll 0 0 #FFFFFF; 
}

그것을 수정해야합니다 :)

출처

2011-04-14 15:11:53 RyanP13

는 작업 버전 : http://jsbin.com/afina3/8/edit

제작이 명 변경됩니다.

$(this).find('a').addClass("selected"); //add selected style to the link of this tab

: 나는 탭의 태그에 선택한 스타일을 추가하려면이 라인을 추가 jQuery 코드에서 다음

.tabBox .tabs .selected a { 
    background: #FFF; 
} 

.tabBox .tabs a { 
    float: left; 
    height: 3em; 
    line-height: 3em; 
    -webkit-border-radius: 4px 4px 0 0; 
    -moz-border-radius: 4px 4px 0 0; 
    border-radius: 4px 4px 0 0; 
    background: #EEE; 
    border: 1px solid #BDBDBD; 
    border-bottom: 0; 
    padding: 0px 15px; 
    color: #000; 
    font-size:12px; 
    text-decoration: none; 
    behavior: url(/pie/PIE.htc);} 
}

: 첫 번째는 .tabBox 스타일을 .tabs 위의 선택한 스타일을 이동했다

출처

2011-04-14 15:24:37

Ive가 약간의 변경을가했지만, 새로운 페이지는 http://www.usedcar.co.uk/testtabs2.html 페이지에 있습니다. 문제는 IE8에서 새 탭을 클릭 할 때마다 배경이 이전 탭의 회색으로 돌아가는 대신 흰색으로 유지됩니다. – mark33

링크에서 선택한 클래스를 제거하려면이 줄을 jQuery에 추가하십시오. $ (". tabBox .tabs li a"). removeClass ("selected"); // "활성"클래스를 제거하십시오. –

이 밖으로 코드 도청있어 여분의 중괄호 제거 ...

behavior: url(/pie/PIE.htc);} 
}

편집 : 여기가 ... 데모입니다

작업 : http://jsfiddle.net/j6sF5/1

작동하지 않음 : http://jsfiddle.net/j6sF5/2/ (추가 중괄호)

출처

2011-04-14 15:29:11 wdm

감사합니다. 그것은 문제를 해결하지 못했습니다 – mark33

Jquery Rounded Tabs 크로스 브라우저 (약간의 문제)

답변

관련 문제