在点击图片/标题需要跳转到详情页面的使用场景中,首先定义图片元素的id为“tyzc”,是同一类下的第一个图片

<img src="img/img3.png" width="40" height="40" id="tyzc" pageTarget="index2">
//pageTarget是自定义的
<div class="mui-media-body">拟退役资产</div> 

1-

<script type="text/javascript">
mui("#tyzc")[0].addEventListener("tap",function(){//转化为DOM元素后,要绑定的图片id为tyzc的第一个元素
    alert(test);
    window.location.href="index.html";
})
</script> 

2-

<script type="text/javascript">
mui("img")[0].addEventListener("tap",function(){//转化为DOM元素后,限定为img类,然后绑定img的第一个元素
alert(test);window.location.href="index.html";
})
</script>

3-

<a href="#">//在每个要跳转的元素后添加<a>超链接标签,用自己要跳转的url地址代替#

4-  将九宫格中的图片批量绑定要跳转的页面  以上为单个图片的跳转,要实现批量操作多个图片的跳转时:

<script type="text/javascript">
mui('.mui-content').on('tap', 'img', function() { var pageName = this.getAttribute("pagetarget");
window.location.href = pageName+".html";
});
</script>

  

 

MUI+html5+script 不同页面间转跳(九宫格)的更多相关文章

  1. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  2. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  3. Android实现不同Active页面间的跳转

    Intent intent = new Intent(); intent.setClass(ErrorPageActive.this, LoginActive.class); startActivit ...

  4. Html学习之一(锚点链接的使用,页面间的跳转)

    页面一: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  5. 【HarmonyOS】【DevEco Studio】NOTE04:How to Jump to a Page(页面间的跳转)

    页面创建与基本设置 创建页面 创建两个新页面,分别为AbilityPage1.AbilityPage2 设置页面基本内容 以AbilityPage1为例 导包 import com.example.m ...

  6. android开发 单击按钮 实现页面间的跳转

    我的MainActivity.java部分代码 public class MainActivity extends ActionBarActivity { //不要定义button类型,会出错 Vie ...

  7. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...

  8. Metro 页面间跳转报错、打包和安装一个本地的Metro类型应用

    1.模板页面间传值跳转报错误 参照:http://www.cnblogs.com/dagehaoshuang/archive/2012/08/31/2665166.html#2862480 强烈推荐, ...

  9. ionic页面间跳转的动画实现

    1. 在<ion-view>标签中加入: nav-direction="back"或nav-direction="forward" 2.用$stat ...

随机推荐

  1. HTML5标签速查

    HTML5标签速查,助你快速了解HTML 5. HTML 5新加入的标签以黑体标识,HTML 5不支持的以斜体标识. 标签 描述 <!--...--> 评论 <!DOCTYPE> ...

  2. 让子弹飞,零成本让你的网站更快一点,boxopened http/3 (QUIC) 协议实战

    最近HTTP-over-QUIC 协议被正式命名为 HTTP/3,协议带来的最大改变是协议底层将采用UDP协议,而不再是TCP协议,这样的好处吗,就是更低时延,更好的拥塞控制,更精确的RTT时间,更高 ...

  3. Java到底是编译还是解释型语言?编译和解释型语言有什么区别?

    7.java语言执行过程与方式: 编译型语言: 是指使用专门的编译器.针对特定平台(操作系统)将某种高级语言源程序一次性"翻译"成可被该平台硬件运行的机器码(包括指令和数据),并包 ...

  4. Servlet 3.0以上版本使用@WebServlet注解配置映射

    以前的Servlet都是在web.xml中进行配置,导致web.xml中各个Servlet的映射非常杂乱无章,后期也很难维护 本篇文章将详细阐述如何使用Servlet 3.0的新特性使用@WebSer ...

  5. vConsole移动端调试利器

    图示: ,  简单的几步操作: 1. 引入cdn     可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用 <!DOCTYPE html ...

  6. Python使用函数实现杨辉三角

    运行效果: 可在函数中指定阶层数,输出对应的杨辉三角 源代码如下: 1 # -*-coding:utf-8 -*- 2 ''' 3 chapter4_do.py 4 函数yanghui(n)用于输出n ...

  7. 适配手机端rpx像素

    <script src="static/js/adaptive.js"></script> <script type="text/javas ...

  8. BootstrapBlazor实战-Tree树形控件使用(1)

    实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/Sql ...

  9. Linux下安装Typora

    系统:Ubuntu16.0 下载链接:https://www.typora.io/#linux 参考链接:https://www.cnblogs.com/wenkangzero/p/13202415. ...

  10. 基于Composer的Laravel扩展包开发工作流 ,实现laravle项目的文件管理(记录成长)

    PHP Composer包开发 基于Composer的Laravel扩展包开发工作流 实现laravle项目的文件管理,添加文件/文件夹,删除文件,查看代码/文件(代码支持缩进,支持语法高亮) com ...