首页 > 代码库 > 网页中tab标签切换分别用jquery和javascript源码实现
网页中tab标签切换分别用jquery和javascript源码实现
//HTML布局
<ul id="tabTitle"> <li class="active">HTML5</li> <li>PHP</li> <li>Java</li></ul><div id="div1" style="display: block"> HTML5</div><div id="div2"> PHP</div><div id="div3"> Java</div>
//css样式
<style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; float: left; padding: 5px 10px; border: 1px solid #008000; margin: 10px; } div { width: 150px; height: 140px; border: 1px solid black; clear: both; margin-left: 10px; display: none; } .active { background: palegreen; }</style>
//javascript源码
<script type="text/javascript"> window.onload = function() { var oUl = document.getElementById("tabTitle"); var aLi = oUl.getElementsByTagName(‘li‘); var aDiv = document.getElementsByTagName(‘div‘); for(var i = 0; i < aLi.length; i++) { aLi[i].index = i; aLi[i].onclick = function() { for(var i = 0; i < aLi.length; i++) { aLi[i].className = ‘‘; aDiv[i].style.display = ‘none‘; } this.className = ‘active‘; aDiv[this.index].style.display = ‘block‘; }; }; };</script>
运行后如图：
以上就是使用javascript实现的切换页的方式喽...
接下来使用jquery实现同样的功能！！！
<ul id="tabTitle"> <li class="active">HTML5</li> <li>PHP</li> <li>Java</li></ul><div id="wrap"> <div id="div1" style="display: block"> HTML5 </div> <div id="div2"> PHP </div> <div id="div3"> Java </div></div>
<style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; float: left; padding: 5px 10px; border: 1px solid #008000; margin: 10px; } #wrap div { width: 150px; height: 140px; border: 1px solid black; clear: both; margin-left: 10px; display: none; } .active { background: palegreen; }</style>
<script src="http://www.mamicode.com/js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () { $(‘ul li‘).click(function () { //切换标签样式 $(this).addClass(‘active‘).siblings().removeClass(‘active‘); //切换div显示隐藏 $(‘#wrap>div‘).eq($(this).index()).show().siblings().hide();
//也可以直接写成一句话，和上面两句分着写效果是一样的
$(this).addClass(‘active‘).siblings().removeClass(‘active‘).parent().next().children().eq($(this).index()).show().siblings().hide(); });});</script>
运行后的效果和上面是一样的。
注意：eq($(this).index()); 不要忘记这个index()方法哦~~
你也赶快运行起来吧~~~
作者原创，转载请注明出处!
网页中tab标签切换分别用jquery和javascript源码实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。