2017-03-19 1 views
-3

내 HTML 페이지의 1 섹션을 표시하고 나머지는 숨기려고했습니다. "다음"버튼과 "이전"버튼을 만들어 무리를 스크롤하십시오. 그러나 웹 사이트는 이것에 의해 영향을받지 않는 것처럼 보였다.한 문장을 숨기고 다른 문장을 드러내는 방법?

next1 = function() { 

    if ($("#p1").css("display") !== "none") { 
     $("#p2").show() 
     $("#p1").hide() 
     $("#p3").hide() 
    } 

    else if ($("#p2").css("display") !== "none") { 
     $("#p3").show() 
     $("#p1").hide() 
     $("#p2").hide() 
    } 

    else if ($("#p3").css("display") !== "none")) { 
     alert("This is the end.") 
    } 

} 

prior = function() { 
    if ($("#p1").css("display") !== "none")) { 
     alert("No pages before this.") 
     } 

    else if ($("#p2").css("display") !== "none")) { 
     $("#p1").show() 
     $("#p2").hide() 
     $("#p3").hide() 
    } 

    else if ($("#p3").css("display") !== "none")) { 
     $("#p2").show() 
     $("#p1").hide() 
     $("#p3").hide() 
    } 

} 

setup = function() { 
    $("#p2").css("display") == "none") 
    $("#p3").css("display") == "none") 
    $("#next1").click(next) 
    $("#prior").click(prior) 

} 
$(document).ready(setup) 

과 HTML은

<!DOCTYPE html> 

<head> 

<script src="page.js"></script> 
<title>A Story</title> 
</head> 
<body> 


<section id="p1"> 
<p>...4</p> 
</section> 

<section id="p2"> 
<p>..2.</p> 
</section> 

<section id="p3"> 
<p>..1.</p> 
</section> 


<button value="prior">previous</button> <button value="next">next</button> 


</body> 
</html> 
+0

서식이나 구문에 문제가있는 경우 알려주십시오. 미리 감사드립니다 –

+0

안녕하세요 @ FalseLiu - [ask] 페이지를 확인하십시오. 여기에 불완전한 코드를 제공했습니다. 해당 HTML이 없습니다. 또한 표시된 부분에 오류가 많이있는 것 같습니다. –

답변

0

내가 문제가있는 경우 문에서 생각합니다.

if ($("#p1").css('display') !== 'none') { 
    $("#p2").show() 
    $("#p1").hide() 
    $("#p3").hide() 
} 

는 경우 ($는 ("#의 P1"). 쇼()) {... 못할 일이 쇼는 함수가 아닌 객체의 속성이기 때문에

normaly JQuery와 숨길 디스플레이 전혀 사용하지 않습니다 DOM 요소

그런데 게시 된 코드에서 jquery를로드하는 것을 잊어 버렸습니다.

다음 문제는입니다. 브라우저가 dom을 빌드하기 전에 스크립트를 사용할 수 있습니다. body 태그 뒤에 script 태그를 설정하십시오.

jquery 문서를 간략하게 살펴보고 $ (document) .ready()가하는 일과 모든 사람들이 사용하는 이유를 살펴보십시오.

+0

글쎄, 나는 그것을 별도로 시도했다. 하나는 java 용이고 다른 하나는 html 용입니다. –

+0

그래서, 미안 해요,하지만 "$"파일을로드 생각. –

+0

@ FalseLiu $는 JQuery의 바로 가기이며, ist를 사용하는 경우이 $가 포함되어야합니다. – TypedSource

관련 문제