페이지가 로드될 때가 아닌 클릭 시 div가 로드되도록 하는 방법은 무엇입니까?[닫은]

StackOverflow https://stackoverflow.com/questions/1088432

문제

저는 현재 새로운 웹사이트를 만들고 있습니다.한 페이지를 사용하고 jQuery 아코디언 메뉴를 사용하여 콘텐츠를 로드합니다.콘텐츠는 6개의 서로 다른 div로 분할되었으며 페이지에 액세스하자마자 모두 로드됩니다.링크를 클릭하면 각 div를 로드하고 싶습니다.페이지 로딩 시간을 줄이기 위해.

여기 진행 중인 작업 사이트에서 이 내용을 볼 수 있습니다. http://is.gd/1p1Ys

나는 jQuery 스크립트를 만들지 않았고 JavaScript/jQuery에 능숙하지 않기 때문에 무엇을 해야할지 전혀 모릅니다.그래서 여기 누군가가 나를 도와줄 수 있는지 궁금합니다.

엄청 고마워,

라이언

도움이 되었습니까?

해결책

나는 jquery-ui 탭이 정확히 이런 일을 한다는 다른 답변에 동의하지만, 아코디언.js 파일을 꽤 쉽게 해킹할 수 있습니다...원하는 콘텐츠가 포함된 외부 HTML 파일을 가리키도록 탐색에서 href를 변경하면 됩니다.href="#lifestream" => href="lifestream.html",

그런 다음 Accordian.js에서: 

$links.click(function () {
  var link = this,
  if(!link.href.match(/^#.*/)) { //if the href doesn't start with '#'
    loadDiv(link.href);
  } else {
    doRestOfFunction(); //everything your script is currently doing.
  }
});

function loadDiv(href) {
  $.get(href, function(html) {
   var newDiv = $(html)
   $(".panels").append(newDiv);
   newDiv.hide();
   doRestOfFunction(); //same as above
  }
}

다른 팁

설명 에서이 DIV가 최상위 메뉴 항목을 클릭 할 때까지 표시되지 않은 것처럼 들립니다. 이 경우 jQuery를 사용하여 서브 메뉴 DIV를 열면 DOM에 삽입 할 수 있습니다.

JavaScript/Dom Manipulation에 대한 괜찮은 자습서를 찾을 수 있습니다. W3Schools.

아코디언 통제가 당신이 후에 있는지 확실하지 않습니다 - 확인 jQuery 탭 - Ajax를 통해 콘텐츠를로드하여 한 번에 모두로드하는 것을 방지 할 수 있습니다. 이것을하는 방법에 대한 설명은입니다 여기

컨텐츠를 동적으로로드하려면 jQuery-UI 탭을 보는 것이 좋습니다. 현재 나는 그것을 처리 할 아코디언 플러그인을 보지 못했습니다. 이는 아코디언으로서 컨텐츠의 높이를 알아야 할 필요가 있으며, 패널을 클릭하면 동적 콘텐츠를 기다려야한다면 육포처럼 보일 것입니다. 탭은 앞으로 나아가는 가장 좋고 가장 적절한 방법입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top