//解决 所有a标签 导航不能跳转页面

          mui('body').on('tap','a',function(){document.location.href=this.href;});
//解决MUI页面不会滚动的方法

 (function($){

    $(".mui-scroll-wrapper").scroll({

                bounce: false,//滚动条是否有弹力默认是true

                indicators: true, //是否显示滚动条,默认是true

    });

})(mui);

下面是例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title></title>

    <script src="js/mui.min.js"></script>

    <link href="css/mui.min.css" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8">

          mui.init();

    </script>

</head>

<body>

    <!-- 主界面菜单同时移动 -->

        <!-- 侧滑导航根容器 -->

        <div class="mui-off-canvas-wrap mui-draggable">

            <!-- 主页面容器 -->

            <div class="mui-inner-wrap">

                <!-- 菜单容器 -->

                <aside class="mui-off-canvas-left" id="offCanvasSide">

                    <div class="mui-scroll-wrapper">

                        <div class="mui-scroll">

                            <!-- 菜单具体展示内容 -->

                            <ul class="mui-table-view">

                                    <li class="mui-table-view-cell">

                                        <a class="mui-navigate-right">

                                                                               数学

                                        </a>

                                    </li>

                                    <li class="mui-table-view-cell">

                                        <a class="mui-navigate-right">

                                             语文

                                        </a>

                                    </li>

                                    <li class="mui-table-view-cell">

                                        <a class="mui-navigate-right">

                                            英语

                                        </a>

                                    </li>

                                </ul>

                        </div>

                    </div>

                </aside>

                <!-- 主页面标题 -->

                <header class="mui-bar mui-bar-nav">

                    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>

                    <h1 class="mui-title">知识库</h1>

                </header>

                <nav class="mui-bar mui-bar-tab">

                    <a class="mui-tab-item mui-active">

                        <span class="mui-icon mui-icon-home"></span>

                        <span class="mui-tab-label">首页</span>

                    </a>

                    <a class="mui-tab-item">

                        <span class="mui-icon mui-icon-phone"></span>

                        <span class="mui-tab-label">电话</span>

                    </a>

                    <a class="mui-tab-item">

                        <span class="mui-icon mui-icon-email"></span>

                        <span class="mui-tab-label">邮件</span>

                    </a>

                    <a class="mui-tab-item">

                        <span class="mui-icon mui-icon-gear"></span>

                        <span class="mui-tab-label">设置</span>

                    </a>

                </nav>

                <!-- 主页面内容容器 -->

                <div class="mui-content mui-scroll-wrapper">

                    <div class="mui-scroll">

                        <!-- 主界面具体展示内容 -->

                         <div id="slider" class="mui-slider" >

                          <div class="mui-slider-group mui-slider-loop">

                            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->

                            <div class="mui-slider-item mui-slider-item-duplicate">

                              <a href="#">

                                <img src="data:images/4.jpg">

                              </a>

                            </div>

                            <!-- 第一张 -->

                            <div class="mui-slider-item">

                              <a href="#">

                                <img src="data:images/1.jpg">

                              </a>

                            </div>

                            <!-- 第二张 -->

                            <div class="mui-slider-item">

                              <a href="#">

                                <img src="data:images/2.jpg">

                              </a>

                            </div>

                            <!-- 第三张 -->

                            <div class="mui-slider-item">

                              <a href="#">

                                <img src="data:images/3.jpg">

                              </a>

                            </div>

                            <!-- 第四张 -->

                            <div class="mui-slider-item">

                              <a href="#">

                                <img src="data:images/4.jpg">

                              </a>

                            </div>

                            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->

                            <div class="mui-slider-item mui-slider-item-duplicate">

                              <a href="#">

                                <img src="data:images/1.jpg">

                              </a>

                            </div>

                          </div>

                          <div class="mui-slider-indicator">

                            <div class="mui-indicator mui-active"></div>

                            <div class="mui-indicator"></div>

                            <div class="mui-indicator"></div>

                            <div class="mui-indicator"></div>

                          </div>

                        </div>

                         <ul class="mui-table-view mui-grid-view mui-grid-9">

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="knowledge.html">

                                <span class="mui-icon mui-icon-home"></span>

                                <div class="mui-media-body">Home</div>

                            </a>

                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="#">

                                <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>

                                <div class="mui-media-body">Email</div>

                            </a>

                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="#">

                                <span class="mui-icon mui-icon-chatbubble"></span>

                                <div class="mui-media-body">Chat</div>

                            </a>

                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="#">

                                <span class="mui-icon mui-icon-location"></span>

                                <div class="mui-media-body">Location</div>

                            </a>

                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="#">

                                <span class="mui-icon mui-icon-search"></span>

                                <div class="mui-media-body">Search</div>

                            </a>

                        </li>

                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

                            <a href="#">

                                <span class="mui-icon mui-icon-phone"></span>

                                <div class="mui-media-body">Phone</div>

                            </a>

                        </li>

                            </ul>

                         <ul class="mui-table-view">

                            <li class="mui-table-view-cell mui-media">

                                <a href="javascript:;">

                                    <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">

                                    <div class="mui-media-body">

                                        幸福

                                        <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>

                                    </div>

                                </a>

                            </li>

                            <li class="mui-table-view-cell mui-media">

                                <a href="javascript:;">

                                    <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">

                                    <div class="mui-media-body">

                                        木屋

                                        <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>

                                    </div>

                                </a>

                            </li>

                            <li class="mui-table-view-cell mui-media">

                                <a href="javascript:;">

                                    <img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">

                                    <div class="mui-media-body">

                                        CBD

                                        <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>

                                    </div>

                                </a>

                            </li>

                        </ul>

                         <ul class="mui-table-view">

                            <li class="mui-table-view-cell mui-collapse">

                                <a class="mui-navigate-right" href="#">面板1</a>

                                <div class="mui-collapse-content">

                                    <p>面板1子内容</p>

                                </div>

                            </li>

                            <li class="mui-table-view-cell mui-collapse">

                                <a class="mui-navigate-right" href="#">面板</a>

                                    <div class="mui-collapse-content">

                                    <p>面板2子内容</p>

                                </div>

                            </li>

                            <li class="mui-table-view-cell mui-collapse">

                                <a class="mui-navigate-right" href="#">面板3</a>

                                <div class="mui-collapse-content">

                                    <p>面板3子内容</p>

                                </div>

                            </li>

                        </ul>

                         <div class="mui-progressbar">

                            <span></span>

                        </div>

                        <div class="mui-input-row mui-input-range">

                            <label>Range</label>

                            <input type="range" min="0" max="100" value="50">

                        </div>

                    </div>

                </div>

                   <div class="mui-off-canvas-backdrop"></div>

            </div>

        </div>

        <script type="text/javascript">

        (function($){

            $(".mui-scroll-wrapper").scroll({

                bounce: false,//滚动条是否有弹力默认是true

                indicators: true, //是否显示滚动条,默认是true

            });

        })(mui);

            mui(".mui-progressbar").progressbar({progress:50}).show();

            //解决 所有a标签 导航不能跳转页面

          mui('body').on('tap','a',function(){document.location.href=this.href;});

        </script>

</body>

</html>

MUI框架a链接href跳转失效解决方法，解决MUI页面不会滚动的方法的更多相关文章

  1. MUI框架-10-MUI 数据交互-跳转详情页面

    MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...

  2. 解决MUI阻止a标签默认跳转事件—方法总结

    用过mui的小伙伴们一定不会陌生,有时候真的很烦mui本身会阻止a标签默认跳转.一般只要用了mui的ui组件,比如头部,底部或者弹框,你就不能在用a标签进行跳转了. 注:项目中引用了mui后,可能也会 ...

  3. MUI框架-01-介绍-创建项目-简单页面

    MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问 ...

  4. mui框架中底部导航的跳转1

    mui框架极大的方便了app的开发但是我们在做页面之间的切换时发现不能实现 a 链接的跳转,这是应为mui相关的一些控件是通过拦截a标签上的href来实现的,所以mui.js会阻止a标签上的href跳 ...

  5. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  6. 使用mui框架后a标签无法跳转

    由于最近工作项目上使用到前台mui框架,笔者在将H5转换为jsp时,遇见各种各样问题,原因归结为对mui框架不熟悉,今天就遇见一个特别奇怪的问题,界面中超链接<a>标签无法跳转,笔者试着添 ...

  7. 仅IE6中链接A的href为javascript协议时不能在当前页面跳转

    切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人 ...

  8. 让超链接点击后不跳转,可以用href = "#"，但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...

  9. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

随机推荐

  1. 【原】使用Tkinter绘制GUI并结合Matplotlib实现交互式绘图

    在数据分析的过程中,往往需要对所建立的模型进行可视化,并调整其中的某些参数. 通常情况下,在Python中可以通过Matplotlib来进行绘制图像.然而该绘制过程是静态的,也就是每次调整完参数需要重 ...

  2. 嵌入式开发之hi3519---fifo ringbuffer

    http://blog.csdn.net/CSSEIKOCS/article/details/50790085 http://blog.csdn.net/xuanwolanxue/article/de ...

  3. pca ， nmds , pcoa 图添加分组的椭圆

    对于pca , nmds, pcoa 这些排序分析来说,我们可以从图中看出样本的排列规则,比如分成了几组. 为例样本分组更加的直观,我们可以根据实验设计时的样本分组情况,对属于同一个group的样本添 ...

  4. Ubuntu下安装和使用zookeeper和kafka

    1.在清华镜像站下载kafka_2.10-0.10.0.0.tgz 和 zookeeper-3.4.10.tar.gz 分别解压到/usr/local目录下 2.进入zookeeper目录,在conf ...

  5. [Tensorflow] Object Detection API - build your training environment

    一.前期准备 Prepare protoc Download Protocol Buffers Create folder: protoc and unzip it. unsw@unsw-UX303U ...

  6. [Bayes] prod: M-H: Independence Sampler for Posterior Sampling

    M-H是Metropolis抽样方法的扩展,扩展后可以支持不对称的提议分布. 对于M-H而言,根据候选分布g的不同选择,衍生出了集中不同的变种: (1)Metropolis抽样方法 (2)随机游动Me ...

  7. 大杂烩 -- ArrayList的动态增长 源码分析

    基础大杂烩 -- 目录 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 问题:当ArrayList中放入的元素一直增加会如 ...

  8. iOS（WKWebView）OC与JS交互 之三

      随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...

  9. [APUE]进程控制(下)

    一.更改用户ID和组ID 可以用setuid设置实际用户ID和有效用户ID.可以用setgid函数设置实际组ID和有效组ID. #include <sys/types.h> #includ ...

  10. Python实现Linux命令xxd -i功能

    目录 Python实现Linux命令xxd -i功能 声明 一. Linux xxd -i功能 二. xxd -i常见用途 三. 类xxd -i功能的Python实现 Python实现Linux命令x ...