JS点击按钮切换内容

需求：点击按钮之后 显示不同内容

思路：首先按钮跟内容要一一对应（有按钮就要有内容），当我点击的时候其他全部隐藏，只有被点击显示

图片演示

JavaScript 代码：

	let btnAll = document.getElementByTagName('button')
    let conAll = document.getElementByClassName('content')
    let btnAllLen = btnAll.length
    
    //为每个按钮的click事件创建一个回调函数
    for(let i=0;i<btnAllLen;i++){
    	!(function(n){								// 注册click事件
        	btnAll[n].addEventListener('click',function(){
            	for(let j=0;j<btnAlllen;j++){		
                	btn[j].className = ""			
                    conAll[j].style.display = "none"	
                }
                this.className ="active"
                conAll[n].style.display = "block"
            })
        })(i)
    }

HTML code：

<div class="main">
<nav>
     <button class="active">content 1</button>
     <button>content 2</button>
     <button>content 3</button>
     <button>content 4</button>
</nav>
<div class="content">
	<p style="display: block;">content1</p>
    <p>content2</p>
    <p>content3</p>
    <p>content4</p>
</div>
</div>

CSS code :

.main {
   text-align: center;
}
button:focus {
   outline: none;
}
nav {
   margin-top: 30px;
   box-sizing: border-box;
}
button { 
	background: white;
	border: none;
    height: 36px;
    line-height: 36px;
    width: 80px;
    text-align: center;
    border: 1px solid lightgray;
    border-radius: 4px;
    cursor: pointer;
}
nav > button:not(:first-child) {
   margin-left: 15px;
}
.active {
   background: black;
   color: white;
}
.content {
	margin-top: 40px;
}
.content > p{ 
   display: none;
}