탭메뉴에서 해당항목 선택시 이미지로 표현하고 싶습니다.
본문
아래와 같은 탭메뉴 소스를 사용중입니다.
<style>
... 생략....
.tab-nav-link {
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 2.88;
letter-spacing: -0.09px;
text-align: center;
color: #1f2949;
}
.tab-horizontal .tab-nav-item {
margin: 0px 28px;
}
.tab-nav-link.active {
color: #0352cc;
}
... 생략....
</style>
<ul class="tab-nav nav nav-tabs">
<li class="tab-nav-item"><a class="tab-nav-link active" data-toggle="tab" href="#tab-1">Tab 1</a></li>
<li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-2">Tab 2</a></li>
<li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-3">Tab 3</a></li>
<li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-4">Tab 4</a></li> </ul>
위의 소스에서는 스타일의 active 값으로 선택된 항목을 표시하고 있는데요.
텍스트가 아닌 이미지 버튼을 넣어서 사용하고,
선택되었을때와 선택되지 않았을때의 이미지를 다르게 표시하는 방법으로 수정하고 싶은데요.
어떻게 하면 될까요?
즉, 위의 Tab1 ~ Tab4 까지의 텍스트 대신에
tab1.png ~ tab4.png 까지의 이미지로 표시하고
tab1_active.png 를 만들어서 tab1 이 선택되면 tab1_active.png 가 보이도록 하고 싶습니다.
위의 소스를 어떻게 수정하면 될까요?
