这篇文章主要为大家展示了“html5如何实现横向滑动导航栏”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现横向滑动导航栏”这篇文章吧。
1、首先引入scroll.js
2、html部分:
<!-- 科目导航 -->
<div id="navBox" class="navMain">
<ul class="nav" >
<li><a class="active" href="javascript:;">全部</a></li>
<li><a href="javascript:;">数学</a></li>
<li><a href="javascript:;">英语</a></li>
<li><a href="javascript:;">语文</a></li>
<li><a href="javascript:;">物理</a></li>
<li><a href="javascript:;">思想品德</a></li>
</ul>
</div>
3、css部分
/* 滑动导航 */ .nav li { float: left; min-width: 60px; padding: 5px 0; margin-right: 9px; } .nav a{ font-size: 14px; color: #999; } .navMain{ background-color: #fff; position: relative; margin: 0 13px; } .nav{ background-color: #fff; overflow: hidden; } .nav li>a.active{ color: #3a95f5; border-bottom: 1px solid #3a95f5; padding-bottom: 2px; }
4、js部分
$(".nav li a").click(function(){ $(this).addClass("active").parents("li").siblings().find("a").removeClass("active"); }); window.addEventListener('load',function(){ var $navBox = document.getElementById('navBox'), $ul = $navBox.querySelector('ul'), liArray = $navBox.querySelectorAll('li'), liLength = $navBox.querySelectorAll('li').length;10 $ul.style.width = (liArray[0].clientWidth + 10)*liLength +"px"; var carousel=new iScroll("carousel",{hScrollbar:false, vScrollbar:false, vScroll: false}); });
以上是“html5如何实现横向滑动导航栏”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。