在点击图片/标题需要跳转到详情页面的使用场景中,首先定义图片元素的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. 基于vue2.0的在线电影APP,

    基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...

  2. .map() vs .forEach() vs for() 如何选择?

    访问原文地址 .map() vs .forEach() vs for() 笔者说,自己基本没怎么用过for()来遍历,主要是用.forEach(). 但是总是会被很多朋友说,这些人认为for()的速度 ...

  3. es6-Set与Map

    se5中的set与map 在est5中开发者使用对象属性来模拟.set多用于检查键的存在,map多用于提取数据. { let set = Object.create(null) set.foo = t ...

  4. spring框架常见的10个问题

    一.找不到配置文件的异常org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML ...

  5. IDM调用参数

    cmd调用IDM 基本命令: IDMan /d URL [/p 本地文件路径] [/f 本地文件名] [/q] [/h] [/n] [/a] 参数: 名称 作用 /d 下载文件的url /s 开始任务 ...

  6. Kubernetes 解决方案-图解

  7. java实现sftp文件上传下载

    /** * * @param filePath 文件全路径 * @param ftpPath 上传到目的端目录 * @param username * @param password * @param ...

  8. docker中mysql导入sql文件

    1.先将文件导入到容器 docker cp **.sql [容器名]:/root/ 2.进入容器 docker exec -ti [容器名/ID]/bin/bash 3.将文件导入数据库 mysql ...

  9. 想减少代码量,快设置一个有感知的 Aware Spring Bean

    摘要:正常情况下,Spring 中的 Bean 对 Spring 是无感知的,Spring 框架提供了这种扩展能力,能让一个 bean 成为有感知的. 本文分享自华为云社区<有感知的 Aware ...

  10. SpringMVC 解析(五)URI链接处理

    URI在网络请求中必不可少,Spring提供了一些工具类用于解析或者生成URL,比如根据参数生成GET的URL等.本文会对Spring MVC中的URI工具进行介绍,本文主要参考Spring官方文档. ...