내비게이션 바 관련 질문입니다.
현재 제작하고 있는 웹사이트에 상단 네비게이션 바를 사용중인데요.
버튼을 눌러 각각의 메뉴로 이동했을 때 해당 메뉴를 css로 강조하고 싶습니다.
이러한 처리를 어떻게 하는지 궁금합니다.
pybo에서는 active라는 클래스명을 달아주는 것 같은데, 자바스크립트로 처리를 하신건지가 궁금해요
조광희 님 548
2022년 8월 17일 1:14 오후
박응용님,
2022년 8월 17일 2:26 오후
추천
,
대댓글
박응용님,
2022년 8월 17일 4:30 오후
추천
,
대댓글
1개의 답변이 있습니다. 1 / 1 Page
다음은 파이보의 네비게이션바 소스입니다.
<!-- 네비게이션바 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{% url 'pybo:index' %}">PyBo</a>
<a href="{% url 'pybo:index' %}" class="nav-link text-light">점프 투 게시판</a>
<!--
<a href="https://wikidocs.net/105844" class="nav-link text-warning small">
<span class="badge badge-success">news</span> 《Do it! 점프 투 장고》 책 출간!
</a>
-->
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item {% if "/profile/ranking/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'common:profile_ranking' %}"><i class="fas fa-trophy"></i> 랭킹</a>
</li>
<li class="nav-item {% if "/recent_list/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'pybo:recent_list' %}"><i class="fas fa-history"></i> 최근이력</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item {% if "/settings/base/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'common:settings_base' %}"><i class="fas fa-cog"></i> 계정설정</a>
</li>
<li class="nav-item">
<a class="nav-link profile-link" href="{% url 'common:profile_base' user.id %}"><i class="fas fa-user-alt"></i> {{ user.username }}</a>
</li>
<li class="nav-item {% if "/common/logout/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'common:logout' %}"><i class="fas fa-sign-out-alt"></i> 로그아웃</a>
</li>
{% else %}
<li class="nav-item {% if "/common/login/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'common:login' %}"><i class="fas fa-sign-in-alt"></i> 로그인</a>
</li>
<li class="nav-item {% if "/common/signup/" in request.path %}active{% endif %}">
<a class="nav-link" href="{% url 'common:signup' %}"><i class="fas fa-user-plus"></i> 회원가입</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
박응용 님
2022년 8월 17일 4:30 오후