#是id选择器的dao标识:
用CSS布局主要du用层"div"来实现，而div的样式通zhi过"id选择器dao"来定义内。例如我们首先定义一个层容>>
<div id="menubar"></div>然后在样式表里这样定义：
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
---------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.2.1.min.js"></script>
<style>
ul,li{padding:0;margin: 0;}
<!--<ul>无序HTML列表(<ol>有序HTML列表) -->
.content{
width: 380px;
/* border: 2px solid pink; */
}
<!-- content内容 ；width宽度-->
.content ,#div0,#div1,#div2{
border: 2px solid pink;
}
#div0 ul,#div1 ul,#div2 ul{
padding-left: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
.content #ul1{
list-style: none;
overflow: hidden;
height: 38px;
line-height: 38px;
}
#ul1 li{
width: 80px;
height: 38px;
line-height: 38px;
text-align: center;
font-weight: bold;
float: left;
}
.cur{
background: red;
color: white;
}
<!-- a{
text-decoration: none;
} -->
</style>
</head>
<body>
<div class="content">
<ul id="ul1">
<li class="cur">国内</li>
<li>国际</li>
<li>体育</li>
</ul>
<div id="div0">
<ul>
<li><a href="">[国内]标题一</a></li>
<li><a href="">[国内]标题一</a></li>
</ul>
</div>
<div id="div1" >
<ul>
<li><a href="">[国际]标题一</a></li>
<li><a href="">[国际]标题一</a></li>
</ul>
</div>
<div id="div2" >
<ul>
<li><a href="">[体育]标题一</a></li>
<li><a href="">[体育]标题一</a></li>
</ul>
</div>
</div>
<script>
$(function(){
$("#ul1 li").each(function(index){
$(this).mouseenter(function(){
$("#div0,#div1,#div2").css('display','none');
$("#div"+index).css('display','block');
$("#ul1 li").removeClass('cur');
$("#ul1 li:eq("+index+")").addClass('cur');
})
})
})
</script>
</body>
</html>