<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll ">
<div class="title nav_cetit">福州兴丰办公家具</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="index.html">
首页
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
产品中心
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
成功案例
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
服务推荐
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
客户见证
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
行业新闻
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
关于我们
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
联系我们
</a>
</li>
</ul>
</div>
</div>
</aside>
<div class="mui-inner-wrap">
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="idx-head clearfix">
<div class="hd-left">
<a href="index.html">
<img src="images/logo.png" />
</a>
</div>
<div class="hd-right">
<b><img src="images/index__06.png" /></b>
<div class="hd_tel">
<p>24小时咨询热线</p>
<p class="tel">0591-2802268</p>
</div>
</div>
</div>
<div class="mui-bar list_head" style="position: initial !important;">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">装修课堂</h1>
</div>
<div class="news_list">
<ul><!--图片宽高为235*110-->
<li>
<a href="#" href="index.html">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/banner.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="list_pic"><img src="images/index__21.jpg"/></div>
<div class="list_rg">
<h1>未来十年的发展</h1>
<p>框架结构的办公楼宇，无可避免地使每一个使用单元的边角位置留下或大或小的柱子。要巧妙、合理地“消化这些凸出而又占地方的柱子，</p>
</div>
</a>
</li>
</ul>
<div class="mui-content-padded fy_page">
<ul class="mui-pagination">
<li class="mui-previous mui-disabled">
<a href="#">
«
</a>
</li>
<li class="mui-active">
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="mui-next">
<a href="#">
»
</a>
</li>
</ul>
</div>
</div>
<!--尾部声明-->
<div class="idx_bottom">
<ul>
<li><a href="#">首页 </a></li><li><a href="#">关于兴丰</a></li><li><a href="#">联系我们</a></li><li><a href="#">网站地图</a></li>
</ul>
<p>地址：福州市仓山区城 </p>
<p>电话：0591-28022668 QQ : 791863188 E-mail : 791863188@qq.com.cn</p>
<p>Copyright © 2009-2015 福州 办公家具有限公司 备案号：闽ICP备12002414 </p>
</div>
</div>
<!--底部导航-->
<footer class="ft_bg">
<ul><!--.
--><li>
<a href="#" >
<b><img src="images/index__28.png"/></b>
<p>电话咨询</p>
</a>
</li><!--.
--><li>
<a href="#">
<b><img src="images/index__31.png"/></b>
<p>在线咨询</p>
</a>
</li><!--.
--><li>
<a href="#">
<b><img src="images/index__34.png"/></b>
<p>联系我们</p>
</a>
</li><!--.
--><li>
<a href="#">
<b><img src="images/index__36.png"/></b>
<p>回到顶部</p>
</a>
</li>
</ul>
</footer>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
</script>
<script>
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
var li = this.parentNode;
var classList = li.classList;
if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
var active = li.parentNode.querySelector('.mui-active');
if (classList.contains('mui-previous')) {//previous
if (active) {
var previous = active.previousElementSibling;
console.log('previous', previous);
if (previous && !previous.classList.contains('mui-previous')) {
$.trigger(previous.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else if (classList.contains('mui-next')) {//next
if (active) {
var next = active.nextElementSibling;
if (next && !next.classList.contains('mui-next')) {
$.trigger(next.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else {//page
active.classList.remove('mui-active');
classList.add('mui-active');
var page = parseInt(this.innerText);
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
}
}
});
})(mui);
</script>
用了li:hover也没效果，感觉有什么东西罩住一样请问怎么解决，把mui-off-canvas-wrap去掉可以点但是侧滑菜单出不来了
3 个回复
啊甜
这个世界好凄凉
JBoss
这个问题怎么解决呢？
梦中情人阿卡丽 - 乱填的
写到js里面，百度一下就有很多例子