JQM：如何点击footer中的navbar在只切换content的内容

标签：style   java   使用   os   io   for   ar   问题   div   

我google了一下（不要baidu，baidu估计搜索不到类似的问题），老外的解决办法其实和我之前的办法一样，就是在每个page中都重复写一个navbar，具体见下面的html： 

<div id="home" data-role="page">  
    <div data-role="header">  
        <h1>Home</h1>  
    </div>  
  
  
    <div data-role="content">  
        <p>  
            <a href="#page-1">Page 1</a>  
        </p>  
    </div>  
</div>  
  
<div id="page-1" data-role="page">  
    <div data-role="header">  
        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>  
        <h1>Page 1</h1>  
    </div>  
    <div data-role="content">  
        <p>Page 1 content</p>  
    </div>  
    <div data-role="footer" data-position="fixed">  
        <div data-role="navbar">  
            <ul>  
                <li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>  
                <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>  
                <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>  
            </ul>  
        </div>  
    </div>  
</div>  
  
<div id="page-2" data-role="page">  
    <div data-role="header">  
        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>  
        <h1>Page 2</h1>  
    </div>  
    <div data-role="content">  
        <p>Page 2 content</p>  
    </div>  
    <div data-role="footer" data-position="fixed">  
        <div data-role="navbar">  
            <ul>  
                <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>  
                <li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>  
                <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>  
            </ul>  
        </div>  
    </div>  
</div>  
  
<div id="page-3" data-role="page">  
    <div data-role="header">  
        <a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>  
        <h1>Page 3</h1>  
    </div>  
    <div data-role="content">  
        <p>Page 3 content</p>  
    </div>  
    <div data-role="footer" data-position="fixed">  
        <div data-role="navbar">  
            <ul>  
                <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>  
                <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>  
                <li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>  
            </ul>  
        </div>  
    </div>  
</div>  

$("a[data-role=tab]").each(function () {  
    var anchor = $(this);  
    anchor.bind("click", function () {  
        $.mobile.changePage(anchor.attr("href"), {  
            transition: "none",  
            changeHash: false  
        });  
        return false;  
    });  
});  
  
$("div[data-role=page]").bind("pagebeforeshow", function (e, data) {  
    $.mobile.silentScroll(0);  
    $.mobile.changePage.defaults.transition = 'slide';  
});  

JQM：如何点击footer中的navbar在只切换content的内容

标签：style   java   使用   os   io   for   ar   问题   div   

原文地址：http://blog.csdn.net/iasmn68628/article/details/38753153