日常常用功能-tab切换-原生js和jQuery两种写法，同一思路

来源：互联网发布：winXP关闭防火墙端口编辑：程序博客网时间：2024/05/29 13:46

思路：

1、先设置所以得选项的className为空，内容部分display：none；

2、当点击的时候，选项的className显示active，内容部分display：block；

原生js部分：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>body{ margin:0; padding:0;}.active{ background:red;}ul{ margin:0; padding:0; padding-bottom:20px;}li{ float:left; list-style:none;}#div1 div{ clear:both; width:200px; height:200px; border:1px solid red; display:none;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');var aLi=oDiv.getElementsByTagName('li');var aCon = oDiv.getElementsByTagName('div');for(var i=0; i<aLi.length; i++){aLi[i].index=i;aLi[i].onclick=function(){for(var j=0; j<aLi.length; j++){aLi[j].className='';aCon[j].style.display='none';}this.className='active';aCon[this.index].style.display='block';};}};</script></head><body><div id="div1"><ul>    <li class="active"><a href="#">选项1</a></li>        <li><a href="#">选项2</a></li>        <li><a href="#">选项3</a></li>    </ul>    <div style="display:block;">111111</div>    <div>222222</div>    <div>333333</div></div></body></html>

jQuery部分：

1、引入jQuery的js库

2、代码如下

$(function(){$('#div').find('li').click(function(){$('#div1').find('li').attr('class','');$('$div').find('div').css('display', 'none;');$(this).attr('class','active');$('#div').find('div').eq($(this).index()).css('display', 'block');});});

按照js的思路，jQuery按照js的代码顺序，写法如上，可后期简写。

阅读全文

0 0