jquery와 div를 떠 다니는 숨기기

현재 작업중인 im에서 작업하고있는 마지막 시간에 실제로 작동하는 문제가 있습니다. 하지만 다른 요소를 통합하기 위해 다시 디자인하고 있습니다. jquery 부품을 작동시키는 것 같지 않습니다.jquery와 div를 떠 다니는 숨기기

기본적으로 div가있는 html 문서가 있습니다. 이 div는 id = ""s가 jquery를 사용하여 호출 할 수 있도록 첨부되어 있습니다. 기본적으로 내가하고 싶은 일은 한 HTML 문서의 일부인 div를 보여 주거나 숨기는 것입니다. 이 div는 하나씩 차례로 플로팅되지만 사용자가 탐색을 클릭 할 때 다른 시간에 표시해야합니다. 아래의 은 내가 가지고있는 단순화 된 마크 업입니다. id는 어떤 태그를 숨기고 어떤 태그를 표시 할 것인지를 결정하는 태그가 될 것이며 선택기는 링크 모음 부분에있는 개별 목록 태그에있을 것입니다.

<body> 
<div class="linkbar"></div> 
    <div class="pages"> 
    <div class="page-one" id="B1"></div> 
    <div class="page-two" id="B2"></div> 
    <div class="page-three" id="B3"></div> 
    <div class="page-four" id="B4"></div> 
    </div> 
<div class="footer"></div> 
</body>

다른 메모. 거의 모든 요소는 1000px 너비 내에서 떠있었습니다. 페이지 부분은 페이지 1 div의 콘텐츠로 채우기를 원하는 1000px 너비 x "X"높이 공간입니다.

다음은 jQuery 마크 업으로 페이지로드에 첫 번째 태그를 표시 한 다음 순번 표시에서 선택한 "페이지"에 따라 표시하고 숨길 것입니다. # A1-3은 탐색 링크와 연관된 선택자입니다.

$(function() { 
$(document).ready(function() { 
    ${"B0").show(); 
    $("div.home").show(); 
    $("div.my-life").hide(); 
    $("div.photos").hide(); 
    $("div.video").hide(); 
    $("div.news").hide(); 
    $("div.contact-me").hide(); 
}); 
}); 


$(function() { 
$("#A1").click(function() { 
$("#B1").show(); 
$("#B2").hide(); 
$("#B3").hide(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
}); 
$(function() { 
$("#A2").click(function() { 
$("#B1").hide(); 
$("#B2").show(); 
$("#B3").hide(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
}); 
$(function() { 
$("#A3").click(function() { 
$("#B1").hide(); 
$("#B2").hide(); 
$("#B3").show(); 
$("#B4").hide();  
$("#B5").hide(); 
$("#B6").hide();  
}); 
});

도움 말? 지난 번에 작동했기 때문에 그 견과류를 몰아 냈습니다.

출처

2012-03-30 Trevor Miles Wagner

$ { "B0").보여 주다(); {는 ( – Rodolfo

Hiya, $ { "B0")이어야합니다. show(); == $ ("# B0"). show(); 그리고 html로 B0 엘리먼트를 볼 수 없다. 당신의 코드를 조사하고 jsfiddle을 곧바로 쓸어 버릴지도 모릅니다. 당신이 가지고있는 모든 HTML을 제멋대로 쓸 수 있습니다 : http://jsfiddle.net/6nar4/50/; 건배! –

그 오타처럼 간단 할 수 있습니다. ;-) JavaScript로 작업 할 때 Chrome의 개발자 도구 (f12) 또는 Firebug (Firefox 확장 프로그램)를 콘솔 탭에 열면 다음과 같은 문제가 나타납니다. 사이드 노트 : 모든 숨김 및 쇼를 함께 그룹화 할 수 있습니다. 그것들을 객체의 배열에 캐쉬하거나 적어도 $ B ('# B1, # B2, # B3'). 숨기기 ( –

당신은 당신의 첫번째 선택에 {대신 (의이

$(document).ready(function() { 
    //${"B0").show(); 
    $("B0").show(); 
    $("div.home").show(); 
    $("div.my-life").hide(); 
    $("div.photos").hide(); 
    $("div.video").hide(); 
    $("div.news").hide(); 
    $("div.contact-me").hide(); 
});

편집 : 이와 같은

마이너 자바 스크립트 오류가 쉽게 firebug하는 매우 유용한 자바 스크립트 디버거 및 일반을 사용하여 찾을 수 있습니다 Firefox 용 웹 개발 도구

$(function() { 및 $(document).ready(function() { 정확히 똑같은 것을하고 t를 사용할 필요가 없습니다. 단 한 번 이상. 그 중 하나에 jQuery를 모두 포함시킬 수 있습니다.

출처

2012-03-30 21:01:14

자바 스크립트 lint도 도움이된다 : http://www.javascriptlint.com/online_lint.php – valentinas

기능 형제는 당신이 당신의 코드를 최적화하는 데 도움이 될 수 있습니다 :

<body> 
<div class="linkbar"> 
    <a href="javascript:void(0)" class="link" rel="B1">B1</a> 
    <a href="javascript:void(0)" class="link" rel="B2">B2</a> 
    <a href="javascript:void(0)" class="link" rel="B3">B3</a> 
    <a href="javascript:void(0)" class="link" rel="B4">B4</a> 
    </div> 
    <div class="pages"> 
    <div class="page-one" id="B1">b1</div> 
    <div class="page-two" id="B2">b2</div> 
    <div class="page-three" id="B3">b3</div> 
    <div class="page-four" id="B4">b4</div> 
    </div> 
<div class="footer"></div> 
</body>

자바 스크립트 : 여기

$('.link').click(function(){ 
    $('.pages').find('#'+$(this).attr('rel')).show().siblings().hide(); 
});

테스트를 : http://jsfiddle.net/SZ7y9/10/

행운을 빕니다!

출처

2012-03-30 21:36:05 rekans

원본 코드에서 반복되는 패턴이 많이 있습니다. 코드를 관리하기 쉽게 유지하려면 DRY 원칙을 준수하십시오. 즉, 코드를 단순화 할 수있는 방법을 보여주기 위해 코드를 리팩터링했습니다. try it out

$(function() { 
    $('#nav li a').click(function() { 
     var page = $(this).attr('rel'); // grab rel attribute 
     $('.pages').each(function() { // iterate 
      if ($(this).is(':visible')) { // returns true if visible 
       $(this).hide(); 
      } 
     }); 
     $('.' + page).stop(true, true).toggle('slow'); // show page 
    }); 
    return false; 
});

HTML

<div class="linkbar"> 
    <ul id="nav"> 
     <li><a href="#" rel="page-one">Page One</a></li> 
     <li><a href="#" rel="page-two">Page Two</a></li> 
     <li><a href="#" rel="page-three">Page Three</a></li> 
     <li><a href="#" rel="page-four">Page Four</a></li> 
    </ul> 
</div> 
<div class="pageWrapper"> 
    <div class="page-one pages">One</div> 
    <div class="page-two pages">Two</div> 
    <div class="page-three pages">Three</div> 
    <div class="page-four pages">Four</div> 
</div> 
<div class="footer"></div>

CSS

.pages { 
    display: none; 
}

출처

2012-03-30 21:51:43 shaunsantacruz

jquery와 div를 떠 다니는 숨기기

답변

관련 문제