用了侧滑导航的框架后,在主界面具体展示内容区加了A标签后,A标签不能点击,加链接都没反应,请问是什么问题导致的呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- SEO优化 -->
<meta name="description" content="">
<meta name="keywords" content="">
<!--默认是在safari中全屏展示-->
<link rel="apple-touch-icon-precomposed" href="images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="renderer" content="webkit" />
<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no" />
<title>中演汇</title>
<link rel="stylesheet" href="dist/css/swiper.css" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
...
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<div class="mui-title">
<!--<img src="images/logo.png">-->
<input type="text" class="mui-input-clear" placeholder="Search">
</div>
<a class="mui-pull-right mui-icon"><img src="images/person.png"></a>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
<!-- Banner -->
<div class="mui-banner">
<div class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="about.html"><img src="images/banner.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="about.html"><img src="images/banner.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="about.html"><img src="images/banner.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="about.html"><img src="images/banner.jpg" /></a>
</div>
<div class="mui-slider-item">
<a href="about.html"><img src="images/banner.jpg" /></a>
</div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="about.html"><img src="images/banner.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>
</div>
<!-- 新闻轮播 -->
<div class="mui-news">
<div class="txtMarquee-left">
<div class="bd">
<ul>
<li>
<span class="tag">音乐剧</span>
<a href="">耳朵会上瘾——克里斯托福</a>
</li>
<li>
<span class="tag">音乐剧</span>
<a href="">耳朵会上瘾——克里斯托福</a>
</li>
<li>
<span class="tag">音乐剧</span>
<a href="">耳朵会上瘾——克里斯托福</a>
</li>
<li>
<span class="tag">音乐剧</span>
<a href="">耳朵会上瘾——克里斯托福</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 广告位预留 -->
<div class="advertisement">
<img src="images/adver.png">
</div>
<!-- 剧目分类 -->
<div class="repertoire swiper-container" data-swiper-autoplay="1000">
<h3>剧目分类</h3>
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon2.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon3.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon4.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon5.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon5.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon5.png">
</a>
</li>
<li class="swiper-slide">
<a href="index.html">
<img src="images/icon5.png">
</a>
</li>
</ul>
</div>
<!-- 推荐剧目 -->
<div class="recommend">
<h3></h3>
</div>
<!-- 脚部 -->
<footer class="footer">
<ul>
<li class="on">
<div class="footer-icon"></div>
<a href="index.html">首页</a>
</li>
<li>
<div class="footer-icon"></div>
<a href="">推荐</a>
</li>
<li>
<div class="footer-icon"></div>
<a href="">发现</a>
</li>
<li>
<div class="footer-icon"></div>
<a href="">我的</a>
</li>
</ul>
</footer>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
<script src="dist/js/swiper.min.js"></script>
<script>
document.querySelector('.mui-action-menu').addEventListener('tap', function(event) {
mui('.mui-off-canvas-wrap').offCanvas().toggle();
})
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval: 800 //自动轮播周期,若为0则不自动播放,默认为0;
});
jQuery(".txtMarquee-left").slide({
mainCell: ".bd ul",
autoPlay: true,
effect: "leftMarquee",
interTime: 25
});
// var swiper = new Swiper('.swiper-container', {
// pagination: '.swiper-pagination',
// slidesPerView: 5,
// centeredSlides: true,
// paginationClickable: true,
// spaceBetween: 30,
// autoplay: 1000,
// loop: true
// });
</script>
</html>
卡卡卡卡 (作者)
是的啊,应该说整个页面的A标签都点不了,随便加个链接都是没反应的
2017-06-27 10:56
三毛先生
我测试的没问题。 主要是你的页面太复杂,我删去一些没用的。测试了一下可以跳转。
2017-06-27 11:11
三毛先生
方便的话,你可以弄一个小demo,我帮你看看
2017-06-27 11:12
卡卡卡卡 (作者)
回复 三毛先生:谢谢,问题解决了,好像是和框架本身有关系
2017-06-28 18:09