1
아래 코드를 참조하십시오. 각 페이지마다 전체 버튼이 있습니다. 버튼을 누르면 페이지가 다음 섹션으로 진행되기를 원합니다. 섹션의 텍스트를 <h1></h1> 또는 <p></p> 태그로 묶은 경우를 제외하고 모두 정상적으로 작동했습니다. 예를 들어 섹션 1과 2를 참조하십시오.이 태그를 추가 한 후에 어떤 이유로 버튼이 작동하지 않습니다. 그것은 다른 섹션에서 일하고 있습니다. 1 절에서도 <h1></h1> 태그를 제거하면 정상적으로 작동합니다. 이 태그는 버튼의 기능과 어떤 관련이 있습니까?텍스트에 HTML 태그 추가 버튼 기능을 비활성화합니다.
<!DOCTYPE html>
<html>
<head>
<title>Selecting multiple DIV tags with jquery</title>
<script type="text/javascript" src="./jquery.js">
</script>
<style type="text/css">
html{
overflow: hidden;
}
body {
backround-color: rgb(250, 250, 250);
}
h1 {
font-size: 48px;
color: rgb(90,90,90);
}
.slide {
display: block;
position: absolute;
border-style: solid;
border-width: 1px;
top: 0px;
left: 0px;
padding:20px;
height: 95%;
width: 100%;
font-family: Georgia;
}
</style>
</head>
<body>
<section class="slide">
<h1>This is the first div.</h1>
</section>
<section class="slide">
<p>This is the second div.</p>
</section>
<section class="slide">This is the third div.</section>
<section class="slide">This is the fourth div.</section>
<section class="slide">This is the fifth div.</section>
<section class="slide">This is the sixth div.</section>
<script type="text/javascript">
// Assign ids to each section in the order they appear.
$(document).ready(function(){
$("section").each(function(index){
idtag = 's' + (index + 1)
$(this).attr('id', idtag);
$(this).append('<button>Next div</button>');
$(this).css('opacity', 0);
});
var presentation = function() {
$("section").each(function(index){
$(this).css('opacity', 0);
});
// Check if the current url points to a specific id. If not point
// it to id = 1, otherwise point it to the id specified in the URL.
var currenturl = $(location).attr('href');
var indexhash = currenturl.lastIndexOf('#')
if (indexhash === -1) {
var newurl = currenturl + '#s1';
$("#1").css('opacity',1);
window.location.href = newurl;
}
else {
var currentid = currenturl.substring(indexhash, currenturl.length);
console.log(currentid);
$(currentid).css('opacity', 1);
window.location.href = currenturl;
// window.location.assign(currenturl);
}
};
var nextdiv = function() {
currenturl = location.href;
currentid = location.hash;
console.log(currentid);
newidnum = parseInt(currentid.substring(currentid.indexOf('s')+1, currentid.length),10)+1;
newid = "#s" + newidnum;
newurl = currenturl.substring(0,currenturl.lastIndexOf('#'))+newid;
console.log(newurl);
window.location.href = newurl;
};
// $(document).ready(presentation);
presentation();
$(window).bind('hashchange', presentation);
$('button').bind('click', nextdiv);
});
</script>
</body>
</html>
왜 div가 아닌 Sections를 사용하고 있습니까? – Fallenreaper
전체 스크립트가'presentation (프리젠 테이션) '이 아닌'$ (document) .ready (...)'안에 있어야합니다. – Mathletics
그래, 나는 $ (함수() {...})의 jquery 형태로 아무것도 보지 않는다; – Fallenreaper