탭메뉴 비슷한걸 만들었는데요....
본문
탭메뉴 비슷한걸 만들었는데요...
실행하면 위와같이 메뉴만 나오고 View1 View2 View3 View4 View5 메뉴중 하나를 선택해야지만
아래그림처럼 메뉴에 해당하는 내용이 나오는데요
처음에는 아무것도 안나왔다가 메뉴를 클릭하면 나오는걸 수정하고 싶습니다.
처음부터 View1의 내용이 보이게 또는 다른 View2, View3등의 특정 내용이 나오게 하고 싶은데...
도저희 모르겠습니다.
고수님들의 조언 부탁드립니다.
=========================
<!doctype html>
<html>
<head>
<title>team section</title>
<meta charset="utf-8">
<link rel="stylesheet" href="tab_teamstyle.css">
</head>
<body>
<div class="team-section">
<div class="ps">
<ul>
<a class="active" href="#p1"><li>View1</li></a>
<a href="#p2"><li>View2</li></a>
<a href="#p3"><li>View3</li></a>
<a href="#p4"><li>View4</li></a>
<a href="#p5"><li>View5</li></a>
</ul>
</div>
<div class="section" id="p1">
<P>
tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1tab1
</P>
</div>
<div class="section" id="p2">
<P>
tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2tab2
</P>
</div>
<div class="section" id="p3">
<P>
tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3tab3
</P>
</div>
<div class="section" id="p4">
<P>
tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4tab4
</P>
</div>
<div class="section" id="p5">
<P>
tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5tab5
</P>
</div>
</div>
</body>
</html>
================================
.team-section{
overflow:hidden;
text-align:center;
}
.team-section h1{
text-transform: uppercase;
margin-bottom: 60px;
color: white;
font-size: 40px;
}
.ps a{
padding: 10px;
display: inline-block;
overflow: hidden;
}
.section{
width: 100%;
margin: auto;
font-size: 20px;
color: #333;
text-align: justify;
height: 0;
overflow: hidden;
}
.section:target{
height:auto;
}
======================
