Использовать вкладки jQuery в качестве навигатора по сайту?

Question

Я хочу использовать вкладки jQuery в качестве навигатора, т.е.на самом деле вкладки не должны ничего содержать, но вместо этого, когда пользователь щелкает все остальные вкладки, кроме текущей, он должен перейти на другую страницу.

Кроме того, при переходе на эту страницу я хочу, чтобы вторая вкладка была видна при загрузке.

Пример:

Страница1.aspx:

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

Заголовки вкладок на страницах 2, 3 и 4 должны быть просто ссылками на соответствующую страницу.

Страница2.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 поддерживает загрузку контента через ajax, просто указывая ссылку A на URL-адрес вместо идентификатора div.Но, насколько я знаю, нет никакого способа заставить его перейти на другую страницу.Вероятно, вам лучше просто использовать существующие определения CSS для вкладок, а не использовать плагин вкладок пользовательского интерфейса.

ОБНОВЛЯТЬ.Это базовый макет html/css для вкладок.Вам нужно будет загрузить копию пользовательского интерфейса jquery, чтобы получить CSS и изображения, но это скелет, который создает вкладки.

<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ответ, и после некоторых проб и ошибок и копания в CSS-файле jQuery UI я получил следующее для работы с использованием собственных стилей 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;}