简单tab选项卡切换代码教程

来源：互联网发布：英雄杀今天探宝数据编辑：程序博客网时间：2024/05/16 07:28

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/reset.css"><script src="js/jquery.min.js"></script><style>.tab{width:80%;margin:100px auto;}.top{overflow: hidden;}.top li{float: left; width: 10%; cursor: pointer;}}}</style></head><body><div class="tab"><div class="top" id="top"><ul><li>我是选项卡1</li><li>我是选项卡2</li><li>我是选项卡3</li><li>我是选项卡4</li></ul></div><div class="con" id="con"><div >hahahha1</div><div  style="display:none;">hahahha2</div><div  style="display:none;">hahahha3</div><div  style="display:none;">hahahha4</div></div></div><script>$(function(){$('.top li').each(function(i){$(this).hover(function(){$('.con div').hide();$('.con div:eq('+i+')').show();})})})window.onload=myfor;function myfor(){var x=document.getElementsByClassName('li');var y=document.getElementById('con')}</script></body></html>

1 0