jQuery 탭을 사이트 네비게이터로 사용 하시겠습니까?

Question

jQuery 탭을 네비게이터로 사용하고 싶습니다. 즉 탭에는 실제로 아무것도 포함되어서는 안됩니다. 대신 사용자가 다른 모든 탭을 클릭하면 현재 다른 페이지로 이동해야합니다.

또한 해당 페이지에 도착할 때 두 번째 탭이 표시 될 수 있기를 원합니다.

예시:

Page1.aspx :

    Page1    |    Page2    |    Page3    |    Page4
Page1 content|    blank    |    blank    |    blank

2 페이지, 3 및 4 페이지의 탭 제목은 해당 페이지로의 링크 일뿐입니다.

page2.aspx :

    Page1    |    Page2    |    Page3    |    Page4
    blank    |Page2 content|    blank    |    blank

1, 3 및 4 페이지의 탭 제목은 해당 페이지로의 링크 일뿐입니다.

등등.

탭 호출기를 마스터 페이지에 배치 한 다음 각 페이지의 컨텐츠를 각각의 탭에 채우고 다른 탭을 비워두고 싶습니다.

Answer 1

당신은 다음과 같은 것을 원하지 않습니까?

<ul>
    <li><a href="somepage1.aspx" class="selected">Link 1</a></li>
    <li><a href="somepage2.aspx">Link 2</a></li>
    <li><a href="somepage3.aspx">Link 3</a></li>
    <li><a href="somepage4.aspx">Link 4</a></li>
</ul>
<div id="content1">
    <p>Some content for page 1</p>
</div>

jQuery를 사용하는 것이 무엇인지 알지 못합니까? ...

Answer 2

JQuery는 단순히 DIV ID 대신 URL 링크를 지적하여 AJAX를 통한 컨텐츠로드를 지원합니다. 그러나 내가 아는 한 실제로 다른 페이지로 이동할 방법은 없습니다. 탭의 기존 CSS 정의를 사용하고 UI 탭 플러그인을 사용하지 않는 것만으로도 더 나을 것입니다.

업데이트. 이것은 탭의 기본 HTML/CSS 모형입니다. CSS와 이미지를 얻으려면 jQuery UI 사본을 다운로드해야하지만 탭을 만드는 골격입니다.

<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected"><a href="/">Home</a></li>
    <li class="ui-tabs-nav-item"><a href="/somepage.html">Some Page</a></li>
</ul>

Answer 3

에서 영감을 받다 Mark'답변, 그리고 약간의 시행 착오와 jQuery UI CSS 파일을 파헤친 후 JQuery UI의 자체 스타일을 사용하여 다음과 같은 작업을 수행했습니다.

<div id = "nav-bar" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class = "ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Current Tab</li>
    <li class = "ui-state-default ui-corner-top"><a href="/some_page">To Some Page</a></li>
  </ul>
</div>

그리고 다른 CSS 파일에서는 이것을 추가하십시오

#nav-bar.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding: .5em 1em !important;}