Вы можете использовать стиль панели навигации jQuery Mobile, но использовать свой собственный обработчик кликов, поэтому вместо смены страниц щелчок будет просто скрывать / показывать соответствующий контент на той же странице.
HTML
<div data-role="navbar">
<ul>
<li><a href="#" data-href="a">One</a></li>
<li><a href="#" data-href="b">Two</a></li>
</ul>
</div><!-- /navbar -->
<div class="content_div">onLoad Content</div>
<div id="a" class="content_div">Some 'A' Content</div>
<div id="b" class="content_div">Some 'B' Content</div>
JAVASCRIPT
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;//stop default behavior of link
});
CSS
.content_div {
display: none;
}
.content_div:first-child {
display: block;
}
Вот jsfiddle кода выше: http://jsfiddle.net/3RJuX/
Примечание:
- Каждая из ссылок в панели навигации имеет атрибут «data-href», установленный на идентификатор div (или любого контейнера, который вы хотите использовать), который будет отображаться.
Обновление
Через 1 год я вернулся к этому ответу и заметил, что делегированный селектор обработчика событий может быть немного оптимизирован для использования класса, а не атрибута (который намного быстрее поиска):
$(document).delegate('.ui-navbar a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
Обновление
Этот код можно сделать более модульным, используя относительные селекторы, а не абсолютные (например, $('.content_div'), поскольку при этом будут выбраны все совпадающие элементы в DOM, а не только те, которые относятся к нажатой кнопке).
//same selector here
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
//un-highlight and highlight only the buttons in the same navbar widget
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
//this bit is the same, you could chain it off of the last call by using two `.end()`s
$(this).addClass('ui-navbar-btn-active');
//this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});
Это позволяет вкладывать вкладки и / или иметь несколько наборов вкладок на страницах или псевдостраницах.
Некоторая документация для используемых "относительных селекторов":
Вот пример: http://jsfiddle.net/Cfbjv/25/ (сейчас не в сети)