반응형
부트스트랩 4으로 이러한 ul을 만들 수 있다.
코드는 아래와 같다.
<ul class="nav justify-content-center">
<li class="nav-item itemli">
<a class="nav-link active" href="#">Basic</a>
</li>
<li class="nav-item itemli">
<a class="nav-link disabled" href="#">Advanced</a>
</li>
<li class="nav-item itemli">
<a class="nav-link disabled" href="#">Superior</a>
</li>
</ul>
클래스에 itemli 를 주었다.
disabled 가 a 태그의 글씨를 회색으로 만들어버리는 태그이다.
var itemli = $('.itemli');
itemli.click(function () {
$(this).find('a').removeClass('disabled');
itemli.not($(this)).find('a').addClass('disabled');
});
itemli를 변수로 잡은 뒤
클릭 메소드 -> a tag 찾기 -> disabled 지우기
자신을 제외한 itemli 찾기 - > a tag 찾기 -> disabled 추가해주기
basic을 클릭하면 basic이 파란불이 활성화 되는 동시에 나머지 파란불이 꺼진다.
나머지 버튼도 마찬가지로 적용된다.
반응형
'프로그래밍 > Web' 카테고리의 다른 글
네비게이션 바 fixed-top 설정 시 겹치는 문제 (1) | 2018.03.12 |
---|---|
부트스트랩 네비게이션 fixed-top 설정 시 모달 먹통 문제 (0) | 2018.03.12 |
jquery textarea 변수 값 가져오기 (0) | 2018.03.06 |