西尧多吉
西尧多吉
  • 发布:2014-11-21 23:02
  • 更新:2014-11-23 13:03
  • 阅读:5199

为什么用了tabbar.html里面的链接,手机访问不会跳转?

分类:MUI

原代码:
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">短信咨询</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">查看地图</span>
</a>
</nav>

上述代码中,我修改 href="index.html" 这样,用手机里面的浏览器(chrome)访问,点击菜单不会跳转。。。请问是什么原因?但在桌面浏览器如chrome/safari这些都正常跳转。

2014-11-21 23:02 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

下个版本修复此问题
目前你可以手动处理一下:

mui('.mui-bar-tab').on('tap','a',function(){document.location.href=this.href;});
  • zhaofei

    亲 ,我也出现这个问题了 请问现在有解决办法吗??很急

    2015-11-16 09:33

DCloud_UNI_FXY

DCloud_UNI_FXY

浏览器可以直接访问index.html吗?
工程代码发一下。

西尧多吉

西尧多吉 (作者)

浏览器可以访问啊,且点击菜单链接都正常。但在手机访问的时候,链接怎么都点击不了。
theme.yeboz.com/cr/index.html
我没权限发外链,请将上述链接拷贝到浏览器访问测试,谢谢。

全部代码如下:

<!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>
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style>
html,body {background-color: #efeff4;}
.mui-control-content h3 {padding-top: 100px; text-align: center;}
.mui-bar-nav~{padding:0px;}
.mui-content{padding-top:50px;}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">车途经纪人</h1>
</header>

<div class="mui-content">
<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="image/tmp_sli_img1.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="image/tmp_sli_img2.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="image/tmp_sli_img3.jpg">
<p class="mui-slider-title">想要一间这样的木屋,静静的喝咖啡</p>
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="image/tmp_sli_img1.jpg">
<p class="mui-slider-title">静静看这世界</p>
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="image/tmp_sli_img2.jpg">
<p class="mui-slider-title">幸福就是可以一起睡觉</p>
</a>
</div>
</div>

            <div class="mui-slider-indicator mui-text-right">  
                <div class="mui-indicator mui-active"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
            </div>  
        </div>  
        <script>  
        //var slider = mui("#slider");  
        mui("#slider").slider({  
            interval: 5000  
        });           
    </script>  

    <div>  
   <h2>这个html5的框架太牛B了,跟定你了!</h2>  
    </div>  

</div>

<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="index.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="4g_newcar.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">新车</span>
</a>
<a class="mui-tab-item" href="4g_tuangou.html">
<span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-tab-label">团购</span>
</a>
<a class="mui-tab-item" href="4g_mine.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>

</body>
</html>

西尧多吉

西尧多吉 (作者)

请问这段加到哪里?我是新手,不太懂。。。

另外,刚才测试webview模式的tab bar也是一样,手机点击链接没任何反应。。。

DCloud_UNI_FXY

DCloud_UNI_FXY

加在tab bar所在的页面

  • 西尧多吉 (作者)

    发现加了这个之后,手机上可以点击没问题了,但电脑的浏览器访问就点击不了,真奇怪!有彻底的解决办法吗?

    2014-11-24 09:56

西尧多吉

西尧多吉 (作者)

OK,解决了。我是在导航菜单下面这样加的:

<script>
mui('.mui-bar-tab').on('tap','a',function(){document.location.href=this.href;});
</script>


非常感谢。

  • zhaofei

    亲,我这两天也遇到和你同样的问题,但是加了这个mui('.mui-bar-tab').on('tap','a',function(){document.location.href=this.href;}); 还是不行啊,您找出问题所在了吗????

    2015-11-16 09:34

  • minlanren

    亲 亲 我的亲啊 document.location.href=this.href; 这个可以, 哈哈 解决了

    2016-08-23 16:16

  • minlanren

    <!--描述:tabbar 底部导航条-->


         <nav class="mui-bar mui-bar-tab">  
    <a id="clicktest1" class="mui-tab-item mui-active" href="#tabbar" >
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">主页</span>
    </a>
    <a id="clicktest2" class="mui-tab-item" href="#me.html" >
    <span class="mui-icon mui-icon-chatboxes"></span>
    <span class="mui-tab-label">我</span>
    </a>
    <a id="clicktest3" class="mui-tab-item" href="me.html" >
    <span class="mui-icon mui-icon-compose"><span id="num" class="mui-badge">0</span></span>
    <span class="mui-tab-label">购物车</span>
    </a>

    </nav>

    以上是html的导航内容.

    下面是js


    <script>

    mui('.mui-bar-tab').on('tap','a',function(){

    var me=document.getElementById(this.id);

    alert(me.id);

    if (me.id == "clicktest2") {

    document.location.href=this.href;

    } else{

    alert("你切换的页面的id为"+me.id);

    }

    //document.location.href=this.href;


           }  

    );

    </script>


    不过需要做处理,不然 底部导航条看不到

    2016-08-23 16:22

  • minlanren

    旧的问题解决 又出新问题 发现第三个tabbar 不能切换了 第二个可以调到me.html

    2016-08-23 16:45

  • minlanren

    现在可以切换三个tabbar了(其中一个是另外一个页面a.html,不是div),但是回到第一个tabbar div模式-首页的时候,下面的tabbar首页按钮颜色 不对 图标变模糊了

    2016-08-23 17:07

  • minlanren

    我吧alert信息注释掉后,一切正常了

    2016-08-23 17:11

该问题目前已经被锁定, 无法添加新回复