모든 페이지의 머리말과 꼬리말이 같은 웹 애플리케이션을 개발 중입니다. 달성하고자하는 것은 머리글의 단추를 클릭 할 때 머리글과 바닥 글 사이의 페이지 부분 만 변경하는 것입니다. 예를 들어, Home, Activities 및 Areas의 3 가지 버튼이 있습니다. 내가 활동을 클릭하면 페이지의 머리말과 꼬리말이 동일하게 유지되어야하며 활동 페이지가 머리말과 꼬리말 사이에 와야합니다. 어떻게해야합니까?웹 페이지의 내부 부분 만 어떻게 변경할 수 있습니까?
나는 레먼에 동의합니다. 나는 jQuery/AJAX가 당신이 찾고있는 것이라고 생각한다. 예를 들어 :이 간단한 구현에서
<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">
<!-- All content will be loaded here dynamically -->
</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>
, 난 그냥이 간단한 HTML 페이지, index.html을 템플릿으로 사용됩니다 만들었습니다. 그리고 activities.html에는 동적으로로드하려는 내용이 들어 있습니다.
따라서 활동을 클릭하면 전체 페이지를 다시로드하지 않고서 activities.html을로드해야합니다.
당신은 내가이 시험하지 않았다 jquery.org
에서 jQuery 라이브러리를 다운로드 할 수 있습니다,하지만 작동합니다.
희망 하시겠습니까?
페이지가 배달되면 - 머리글 + 본문 + 바닥 글이 병합됩니다. 이것을 하나의 페이지로 취급 할 수 있습니다. 따라서 헤더의 "Container"라는 요소가 본문의 요소라고 말하면 Body 섹션에 포함 시키면 수정할 수 있습니다.
PHP 또는 서버 측 페이지를 사용하고 있습니까? 헤더와 꼬리말을 포함시킬 수 있습니다. Jquery는 페이지에 머리말과 꼬리말을 포함하려는 경우에 매우 복잡합니다.
PHP, JSP 또는 ASP를 사용하고 있습니까? –
JSP를 사용 중입니다 ... – Piscean
다음 코드에 다음을 삽입하여 바닥 글에 머리글을 포함합니다. 파일 이름은 header.jsp 또는 footer.jsp와 같은 파일의 위치입니다. –
서버에 AJAX 요청을해야합니다. 서버는 머리글과 바닥 글 사이에 "주사"하기 위해 HTML로 응답합니다. 그리고 AJAX 콜백 hendler는 현재 내용을 새로운 것으로 대체 할 것입니다.
이 모든 작업은 jQuery에서 단축키 load 기능을 사용하여 수행됩니다. http://api.jquery.com/load/
콘텐츠가 포함 된 div를 만들고 고유 한 클래스 또는 ID를 지정하십시오. 그런 다음 jquery 코드에서 네비게이션으로 사용할 요소의 click 이벤트를 바인딩하고 그 바인드에서 $ ("# div") .load ("page.php") 또는 다른 파일의 내용을로드하는 것과 같은 것을 사용하십시오 div에
은 모든 페이지가 서로 다른 높이를 갖도록 1 가지만 묻고 싶습니다. div body의 높이와 너비를 조정하는 방법. 높이 : 100 % 및 너비 : 100 %, 괜찮습니까? – Piscean
은 반드시 필요하지 않아야합니다. 높이는 일반적으로 콘텐츠에 자동으로 맞춰집니다. – Flo
HTML에서 href의 ID는 "#activities"이지만 "activities"여야합니다. – showdev