在点击图片/标题需要跳转到详情页面的使用场景中,首先定义图片元素的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. MEVN 架构(MongoDB + Express + Vue + NODEJS)搭建

    一个完整的网站服务架构包括:1.web frame ---这里应用express框架2.web server ---这里应用nodejs3.Database ---这里应用monggoDB4.前端展示 ...

  2. 安装scrapy速度慢解决方案

    使用终端pip安装scrapy龟速 解决方案: 使用清华源下载 清华园链接 https://mirrors.tuna.tsinghua.edu.cn/help/pypi/ win+R打开cmd 输入p ...

  3. URLDNS反序列化链学习

    URLDNS URLDNS跟CommonsCollections比起来真是眉清目秀,该链主要用于验证漏洞,并不能执行命令,优点就是不依赖任何包. 1.利用链 * Gadget Chain: * Has ...

  4. LC-206

    206. 反转链表 迭代法 class Solution { public ListNode reverseList(ListNode head) { //申请节点,pre和 cur,pre指向nul ...

  5. Map的key是否可重复

    我们都知道Map的一大特性是key唯一不可重复,可是真的是这样的吗? 我们来试验一下: 运行结果: 我们可以看到在map里有两个同样的person作为key,打破了map的key不可重复的特性. 我们 ...

  6. Python自动批量修改服务器密码

    工作中,我们经常会定期更换服务器密码,如果手动去修改,不仅费时,而且容易出错.下面提供了一种思路,可以实现批量.自动修改服务器密码. 大致思路:首先,为每一台服务器设定一个唯一标识:其次,将每台服务器 ...

  7. re模块、collections模块、time模块、datetime模块

    正则表达式之re模块 re.findall用法(重要) re.findall( '正则表达式' , '待匹配的字符' ) 找出所有的目标字符,用列表的形式展现,如果找不到返回空列表. import r ...

  8. 学习HTML第二天

    今日内容: HTML标签:表单标签 CSS HTML标签:表单标签 表单项标签: input:可以通过type属性值,改变元素展示的样式 type属性: text:文本输入框,默认值 placehol ...

  9. Mysql学习day2随笔

    --jion on 连接查询 --jion where 等值查询 建议先用jion on再用where过滤 --inner jion 返回交集 --left join 无论右表是否匹配,都会从左表返回 ...

  10. OpenHarmony 3.1 Beta版本关键特性解析——HAP包安装实现剖析

    ​(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点)​ 石磊 随着社会的不断发展,人们逐渐注重更加高效.舒适.便捷.有趣的生活和工作体验. OpenAtom OpenHa ...