用jQuery跟原生js实现选项卡效果_实现一个选项卡效果，用js或者jquery实现。-CSDN博客

本文链接：https://blog.csdn.net/zz912509345/article/details/51860957

也就是让按钮点击的时候出现相应的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>