2012-03-24 2 views
2

내가 누군가가 올바른 방향으로 기존의 HTML 사이트에된 div에서 H1을 얻고

날 지점 수 있기를 바랍니다 사이드 바 링크 메뉴를 만들어, 내가 div의이 많은 페이지를, 각 사업부는 "뉴스 메시지는 "

페이지 당 페이지 수를 1로 표시하려면이 페이지에서 페이지 매김 플러그인을 사용하십시오.

$("#newsmessages .news").quickpaginate({ perpage: 1, showcounter: true, pager : $("#nieuwsbericht_list_counter") }); 

.

는 내가하고 싶은 것입니다 : 모든이 H1 페이지의 사이드 바에서 목록에 넣어 그것을 사업부에 대한 링크를 만들 div에에서

을 가져옵니다.

<div class"news"> 
    <h1>test</h1> 
    <p>blablabla</p> 
    </div> 

    <div class"news"> 
    <h1>test1</h1> 
    <p>blablabla</p> 
    </div> 

    <div class"news"> 
    <h1>test2</h1> 
    <p>blablabla</p> 
    </div>  

<div/> 

가 jQuery로이 가능 :

이 뉴스 메시지의 구조?

이 사람은 이제 3 일 내 머리를 당겨

thnx

UPDATE :

내가 앵커 내 사이드 ​​바 있습니다 웨스턴 덕분에,

하지만 난 클릭 할 때 앵커에서 아무 일도 일어나지 않는다. 나는이 플러그인을 앵커 없이도 사용할 수있다.

누군가가 이것을위한 해결책이 있습니다. 30 분 이내에 스크롤 할 수있는 페이지 매김 플러그인을 선호합니다.

+0

당신이 * 무엇을 의미합니까 * "그것은 사업부에 대한 링크 만들기"? 당신은 "앵커 페이지 점프"를하는 것을 의미합니까? – Joseph

+0

그래, 그럼 당신은 사이드 바에 앵커의 목록을 얻을 – Jeroen

답변

5

Thnx

제론 다음은 jQuery의. 뉴스 앵커에 앵커를 만들고 사이드 바 div에 목록에 링크를 넣습니다. 여기에 갈 수있는 마크 업의

$(function() { 
    var list = $('#sidebar ul'); 

    $(".news h1").each(function() { 
     $(this).prepend('<a name="' + $(this).text() + '"></a>'); 
     $(list).append('<li><a href="#' + $(this).text() + '">' + $(this).text() + '</a></li>'); 
    }); 
}); 

..

<body> 
    <div id="sidebar"> 
    <h2>Sidebar</h2> 
    <ul> 
    </ul> 
    </div> 

    <div class="news"> 
    <h1>test</h1> 
    <p>blablabla</p> 
    </div> 

    <div class="news"> 
    <h1>test1</h1> 
    <p>blablabla</p> 
    </div> 

    <div class="news"> 
    <h1>test2</h1> 
    <p>blablabla</p> 
    </div> 
</body> 
+0

환상적, 작동, 당신들 고마워요 – Jeroen

+0

안녕하세요 웨스턴 감사합니다,이 작품, 왼쪽에만 문제가 wen 나는 앵커 링크 중 하나를 클릭하여 요청한 메시지 말하지 마라, 나는 문제가 페이지 매김에 있다고 생각한다, 당신은 또한 그것을위한 해결책을 가지고 있냐?? thnx – Jeroen

+1

나는 quickpaginate 플러그인을 모른다. DOM 요소를 분리/연결하여 작동하는 경우 # - 링크가 작동하지 않습니다. 어떻게 든 당신은 각 뉴스 편집부가 어느 페이지에 위치해 있는지 추적해야하고, 그 페이지로 전환하라는 페이징을 알려줄 필요가있다. – Weston