마우스호버하면 색들어가고, 메뉴1번만 기본보이다가 2,3을 누르게될 경우에는 해당 내용이 그 위로 보여지게 함
<title>메뉴(네이버 오늘읽을만한 글)</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('.menu a').click(function(){ //.menu a는 menu클래스 아래(속한)있는 a태그, menu클래스 안에있는 a태그
var target= $(this).attr('data-target');
$('.box').hide();
$(target).show();
})
// $('.menu>li:nth-child(1) a').click(function(){
// $('.box').hide();
// $('.box:nth-child(1)').show();
// })
// $('.menu>li:nth-child(2) a').click(function(){
// $('.box').hide();
// $('.box:nth-child(2)').show();
// })
// $('.menu>li:nth-child(3) a').click(function(){
// $('.box').hide();
// $('.box:nth-child(3)').show();
// })
})
</script>
<style>
*{padding:0; margin: 0; text-decoration: none; color: black; list-style: none;}
.menu{
display: flex; border: 1px solid black;}
.menu>li{
width: 100%; border-right: 1px solid black}
.menu>li>a{
display: block; height: 50px;; line-height: 50px; text-align: center;}
.menu>li>a:last-child{
border-right: none;}
.menu>li:hover{
background: burlywood;}
.box{
height: 200px; margin-top: 20px; background-color: teal;}
.box2, .box3{
display: none;}
</style>
</head>
<body>
<nav class="nav">
<ul class="menu">
<li><a href="#" data-target=".box1">메뉴1</a></li> <!--data-target이라는 속성을 만들었음, 기본속성X-->
<li><a href="#" data-target=".box2">메뉴2</a></li>
<li><a href="#" data-target=".box3">메뉴3</a></li>
</ul>
</nav>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>