사용자가 탭 (자바 스크립트가 아닌 레일즈)을 클릭하면 페이지가 '스크롤'에서 맨 위로 멈추게 할 수 있습니까?

Question

필자는 레일을 사용하여 '탭'으로 웹 페이지를 만들었습니다. 사용자가 탭을 클릭하면 새 페이지가로드됩니다. 사용자가 탭을 클릭 할 때 페이지의 동일한 위치에 탭이 항상 있도록 서식을 지정하려고합니다. 이것은 사용자가 페이지를 아래로 스크롤하지 않는 한 발생합니다. 사용자가 아래로 스크롤하면 탭을 클릭하면 페이지가 새로 고침되고 더 이상 아래로 스크롤되지 않으므로 탭을 잘못 표시됩니다. Javascript를 사용하지 않고 사용자가 스크롤 한 페이지의 위치를 ​​유지할 수 있습니까? Javascript로 끝내야 만한다면, 어떤 제안?
T alt text http://img.skitch.com/20100526-xtrn2ncbetj6bs1a2s4xwywfjh.png

Answer 1

자바 스크립트가없는 경우, 그들이 정확한 위치에 있었다면 앵커 (example.html#anchor)를 사용하면 좋겠지 만, 정확한 위치를 알지 못하기 때문에 운이별로없는 것입니다.

미안해!

Answer 2

당신은 할 수 있지만 적은 양의 자바 스크립트와 약간의 CSS 숨김이 필요합니다.

<ul id="nav"> 
    <li class="tab"><a href="#content1">Content 1</a></li> 
    <li class="tab"><a href="#content2">Content 2</a></li> 
</ul> 

그리고 가정이 콘텐츠입니다 :

은 탭이한다고 가정하면 다음해야 할 것이고, 나는 Ext.Core 라이브러리를 사용하여 시연하고 무엇

<div id="content" class="content1"> 
    <div id="content1"> 
    <h1>Some content</h1> 
    <p>This is my content.</p> 
    </div> 

    <div id="content2"> 
    <h1>More content</h1> 
    <p>This is my other content.</p> 
    </div> 
</div> 

가있다 :

이렇게 약간 CSS가 필요합니다.

#content.content2 #content1, 
#content.content1 #content2 { 
    display:none; 
} 

이것은 보이지 않는 다른 콘텐츠를 숨 깁니다. 해당 탭에 대한 링크의 href 인 contentN이라는 클래스를 콘텐츠 컨테이너에 설정했습니다. 따라서 href="#content1"이라는 탭이있는 경우 콘텐츠 컨테이너에 content1이라는 클래스를 추가하고 해당 콘텐츠는 표시되고 다른 콘텐츠는 표시되지 않습니다.

Ext.Core 샘플 페이지에는 다른 방법이 있으며 example up showing it working입니다. 그들의 길은 이것보다 더 복잡합니다.