2012-04-16 3 views
1

div를 표시하거나 숨기려면 다음 코드를 작성했습니다. 한 번에 한 div를 표시하고 다른 div는 숨 깁니다. Safari를 제외한 모든 브라우저에서 작동합니다.Safari에서 JQuery 숨기기 기능이 작동하지 않습니다.

HTML

<div class="buttons"> 
    <a class="button" id="showdiv1">Div 1</a> 
    <a class="button" id="showdiv2">Div 2</a> 
    <a class="button" id="showdiv3">Div 3</a> 
    <a class="button" id="showdiv4">Div 4</a> 
</div> 
<div id="div1">1</div> 
<div id="div2" style="display:none;">2</div> 
<div id="div3" style="display:none;">3</div> 
<div id="div4" style="display:none;">4</div> 

JQuery와

$('#showdiv1').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div1').show(); 
}); 
$('#showdiv2').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div2').show(); 
}); 
$('#showdiv3').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div3').show(); 
}); 
$('#showdiv4').click(function() { 
    $('div[id^=div]').hide(); 
    $('#div4').show(); 
});​ 

나는 절대 초보자 오전 JQuery와 여러 된 div를 보여주는에 가장 우아한 해결책이 될 것이라고 생각하고있다! Safari를 제외하고!

도움이 될만한 도움이 될 것입니다.

+0

작품 : http://jsbin.com/iqexec –

+0

그리고는 이 http://jsfiddle.net/RMhkW/ – peterfoldi

+1

코드는 당신이 인용 한 너무 나를 위해 사파리 5.1.5 작동 질문에 잘못된 문자가 있습니다. 그것은 U + 200B 문자입니다. 만약 내가 실제로 복사하여 코드를 붙여 넣으면, 나는 그것을 시도한 모든 브라우저에서 실패합니다. http://jsbin.com/ojezin 이전 버전에서는 어떻게 든 그 캐릭터를 소개하고 삭제했다고 가정했지만 분명히 삭제했습니다. 아니. –

답변

3

href 속성이없는 a 요소에 click 이벤트가 발생하지 않기 때문에 Safari에서 문제가 있다고 가정합니다.

또한 코드를 단순화 할 수 있습니다. 대신이 시도 :

<div class="buttons"> 
    <a class="button" id="showdiv1" href="#div1">Div 1</a> 
    <a class="button" id="showdiv2" href="#div2">Div 2</a> 
    <a class="button" id="showdiv3" href="#div3">Div 3</a> 
    <a class="button" id="showdiv4" href="#div4">Div 4</a> 
</div> 
<div id="div1" class="child">1</div> 
<div id="div2" class="child" style="display:none;">2</div> 
<div id="div3" class="child" style="display:none;">3</div> 
<div id="div4" class="child" style="display:none;">4</div> 

jQuery를에게

$(".button").click(function(e) { 
    e.preventDefault(); 
    $(".child").hide(); 
    $($(this).attr("href")).show(); 
}); 

공지 그룹화 요소 클래스의 사용을 당신이 너무 많은 코드를 반복하지 않도록.

+0

Safari에서 실행되는 jQuery는 속성 starts-with 선택기에 아무런 문제가 없습니다. 그래도 코드 단축. :-) –

+0

예 - 그럴 것이라고 생각했는데, 입력 할 때 'a'요소에 hrefs가 없다는 것을 알았습니다. 나는 그것을 편집 할 것이다. –

+0

T.J.에 동의해야합니다. 나는 우아함을 찾고 있었는데, 이것은 여전히 ​​유효하지만 이것은 여전히 ​​효과가있다. :-( – user1335857

0

질문에서 인용 한 코드의 끝에는 잘못된 문자가 있습니다. 최종 ; 직후의 U + 200B 문자입니다. 실제로 코드를 복사하여 붙여 넣으면 시도한 모든 브라우저에서 오류가 발생합니다. http://jsbin.com/ojezin 처음에이 테스트 케이스를 만들 때 (질문에 대한 내 의견을 참조하십시오), 필자는 그 문자를 어떻게 든 도입했을 것이라고 생각했습니다. 그래서 방금 삭제했습니다. 그런데 생각을하고 다른 복사하여 붙여 넣기를했는데, 그 캐릭터가 거기있었습니다.

사파리 5.1.5와 나를 위해
관련 문제