该demo定义了一个菜单，点击了一次之后就不能再点击，另外其中也用到了flex布局，可直接将代码复制运行即可
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
<meta charset="utf-8" />
<style>
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
.menu{
display:flex;
flex-flow: row nowrap;
800px;
height:30px;
background:gray;
margin:20px;
}
.menu li{
20%;
height:100%;
margin-left:5px;
background:green;
text-align:center;
color:#fff;
line-height:30px;
cursor:pointer;
-moz-user-select:none;
}
.menu li:nth-child(1){
margin:0px;
}
.menu li:hover{
color:#fff;
background:#f00;
}
.pointer{
pointer-events:none;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页</li>
<li>产品中心</li>
<li>新闻中心</li>
<li>公司简介</li>
<li>联系我们</li>
</ul>
<div id="divContent"></div>
<script>
var divContent=document.getElementById("divContent");
document.getElementsByTagName("ul")[0].addEventListener("click",function(e){
var currentObj=e.target;
if(currentObj.tagName.toLowerCase()=="li"){
var childList=document.getElementsByTagName("ul")[0].childNodes;
for(var i=0;i<childList.length;i++){
childList[i].className="";
}
currentObj.className=" pointer";
divContent.innerHTML=currentObj.innerHTML;
console.log(divContent.innerHTML);
}
})
</script>
</body>
</html>