用jQuery跟原生js实现选项卡效果

来源：互联网发布：科来网络8.0破解版编辑：程序博客网时间：2024/05/30 04:39

也就是让按钮点击的时候出现相应的div 其余的div隐藏代码也很简单了

jquery核心代码只需2行

原生js写的话就稍微有点点麻烦了

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery-1.10.1.min.js"></script><style type="text/css">button{width: 80px;margin-right: 20px;}div{width: 300px;height: 200px;background: red;display: none;}</style><!--<script type="text/javascript">$(function(){ $('button').click(function(){$('div').css('display','none');  $($('div')[$(this).index()]).css('display','block');});});   </script>--><script type="text/javascript">window.onload = function(){var btns = document.getElementsByTagName('button');var divs = document.getElementsByTagName('div');for (var i = 0;i < btns.length;i++) {btns[i].index = i;btns[i].onclick = function(){for (var j = 0; j < divs.length;j++) {divs[j].style.display = 'none';}divs[this.index].style.display = 'block';}}}</script></head><body><button>按钮一</button><button>按钮二</button><button>按钮三</button><div style="display: block;">内容111111111</div><div>内容222222222</div><div>内容333333333</div></body></html>

0 0