Раздели за мобилна навигация на jQuery

Можете да използвате стила на навигационната лента на jQuery Mobile, но използвайте свой собствен манипулатор на щракване, така че вместо да променяте страници, щракването просто ще скрие/покаже правилното съдържание на същата страница.

HTML

<div data-role="navbar">
    <ul>
        <li><a href="/bg#" data-href="/bga">One</a></li>
        <li><a href="/bg#" data-href="/bgb">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();
});​

Това ви позволява да влагате раздели и/или да имате множество набори от раздели на страници или псевдостраници.

Някои документи за използваните „относителни селектори“:

• .closest() : http://api.jquery.com/closest
• .siblings() : http://api.jquery.com/siblings

Ето един пример: http://jsfiddle.net/Cfbjv/25/ (В момента е офлайн )

АКТУАЛИЗАЦИЯ: Разгледайте моя jsfiddle на http://jsfiddle.net/ryanhaney/eLENj/

Току-що прекарах известно време, за да разбера това, така че реших да отговоря на това. Забележка: Използвам многостраничен единичен файл, YMMV.

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="/bg#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
            <li><a href="/bg#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
            <li><a href="/bg#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
        </ul>
    </div>
</div>

$("div[data-role=page]").bind("pagebeforeshow", function () {
    // prevents a jumping "fixed" navbar
    $.mobile.silentScroll(0);
});

$("a[data-role=tab]").each(function () {
        // bind to click of each anchor
        var anchor = $(this);
        anchor.bind("click", function () {
            // change the page, optionally with transitions
            // but DON'T navigate...
            $.mobile.changePage(anchor.attr("href"), {
                transition: "none",
                changeHash: false
        });

        // cancel the click event
        return false;
    });
});

@Майк Бартлет

Аз самият се борех с това, но след разбиването на кода на Jasper изглежда, че има лек нюанс от публикувания от него код и този на страницата jsfiddle.

Където е публикувал

$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });

Намерих за полезно да променя последния ред, за да извиквам просто каквото и да е съдържание, за което сте задали стойността "data-href" да бъде във вашата навигационна лента.

$('div[data-role="navbar"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $($(this).attr('data-href')).show();
  });

моят навигационен html след това чете

<div data-role="navbar">
<ul>
    <li><a href="/bg#" data-href="/bg#a">One</a></li>
    <li><a href="/bg#" data-href="/bg#b">Two</a></li>
</ul>

Which is pretty much the same as his but for some reason I got no "error loading page" message. Hope that helps...

Моля, препратете към тази връзка по-долу за всички видове лента за навигация в jquery

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar">
   <ul>
    <li><a href="/bga.html" class="ui-btn-active">One</a></li>
    <li><a href="/bgb.html">Two</a></li>
   </ul>
</div>

Благодаря

Забелязах, че въпросът беше зададен преди четири години, така че не съм сигурен дали джаджата Tab беше налична с JQ Mobile по това време. все пак аз съм човек от 2015 г

страхотното решение, което използвам по-долу с Jquery Mobile 1.4.5

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="/bg#one" data-ajax="false">one</a></li>
      <li><a href="/bg#two" data-ajax="false">two</a></li>
      <li><a href="/bgajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="/bg#">Acura</a></li>
        <li><a href="/bg#">Audi</a></li>
        <li><a href="/bg#">BMW</a></li>
        <li><a href="/bg#">Cadillac</a></li>
        <li><a href="/bg#">Ferrari</a></li>
    </ul>
  </div>
</div>

Хареса ми отговора на @Ryan-Haney, но реших да добавя моя собствена груба чернова, ако някой може да намери по-ефективен начин да направи това, моля, добавете коментар.. благодаря

Направих го по този начин, защото имам куп "включени" файлове, които се зареждат в DOM по време на изпълнение, така че не можах да кодирам твърдо, че n-тият раздел е маркиран/активен за всяка страница, както може Райън. Освен това имам лукса да имам само една лента с раздели в приложението си.

$(document).delegate('.ui-navbar a', 'tap', function ()
{
  $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active');
  $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active');
});