描述：
实现一个导航栏，点击标题，内容发生相应的改变，在之后也可以设置样式之类的。。。
使用说明：可通过点击，相应的栏目，从而改变栏目中的内容，对于内容可以根据自己的喜好进行更换。
效果展示：
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
ul.list{
width: 500px;
height: 50px;
background-color: aqua;
text-align: center;
line-height: 50px;
font-size: 20px;
}
ul.list > li{
cursor: pointer;
width: 100px;
height: 50px;
float: left;
}
ul.list > li:hover{
color: aqua;
}
ul.list > li.l1{
background-color: red;
}
ul.list > li.l2{
background-color: orange;
}
ul.list > li.l3{
background-color: yellow;
}
ul.list > li.l4{
background-color: green;
}
ul.list > li.l5{
background-color: blue;
}
div{
width: 500px;
height: 300px;
background-color: aqua;
font-size: 30px;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1>导航栏</h1>
<ul class="list">
<li class="l1" onclick="ol1()" title="栏目1">栏目1</li>
<li class="l2" onclick="ol2()" title="栏目2">栏目2</li>
<li class="l3" onclick="ol3()" title="栏目3">栏目3</li>
<li class="l4" onclick="ol4()" title="栏目4">栏目4</li>
<li class="l5" onclick="ol5()" title="栏目5">栏目5</li>
</ul>
<div id="con">栏目1</div>
<script>
var con = document.getElementById("con");
function ol1(){
con.innerHTML = "栏目1";
}
function ol2(){
con.innerHTML = "栏目2";
}
function ol3(){
con.innerHTML = "栏目3";
}
function ol4(){
con.innerHTML = "栏目4";
}
function ol5(){
con.innerHTML = "栏目5";
}
</script>
</body>
</html>
