首页 > 代码库 > JQM：如何点击footer中的navbar在只切换content的内容

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

2024-07-18 22:35:49   212人阅读

在JQM运用中想固定Header与Footer，当然Footer有个NavBar导航菜单， 
<div data-role="page"> 
　<div data-role="header">header</div> 
　 <div data-role="content">这里是内容</div> 
　 <div data-role="footer">footer</div> 
</div> 

格式如上，点击相应的结构菜单的时候希望它只替换 
<div data-role="content"> .......        </div> 
中的内容，然而它却是以页面的形式替换了整个一个"Page"。 

关于这个问题，其实并没有很好的解决办法，这我估计是html的通病。 

我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=http://www.mamicode.com/"#page-1">Page 1  >
他只不过是把页面跳转的效果去掉（默认是slide）了，让人看不上没切换page，只改变了中间的content。 
具体JS如下：
$("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';  
});  

这是目前最好也是最能理解的解决办法。我看见还有一个解决办法，但要写很多JS，难理解，不使用也罢.
JQM：如何点击footer中的navbar在只切换content的内容


联系
我们