부트 스트랩 navbar 활성 상태가 작동하지 않음

91

부트 스트랩 v3이 있습니다.

나는를 사용하여 class="active"내에서 navbar내가 메뉴 항목을 누르면이 전환되지 않습니다. 이 작업을 수행 jQuery하고 클릭 기능을 구축하는 방법을 알고 있지만이 기능이 부트 스트랩에 포함되어야한다고 생각합니까? 그렇다면 JavaScript 문제일까요?

다음은 포함 된 js / css / bootstrap 파일이있는 헤더입니다.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>

내 navbar코드 는 다음과 같습니다 .

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/index.php">MyBrand</a>
            </div>

            <div class="collapse navbar-collapse navbarCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="/index.php">Home</a>
                    </li>

                    <li>
                        <a href="/index2.php"> Links</a>
                    </li>

                    <li>
                        <a href="/history.php">About</a>
                    </li>
                    <li>
                        <a href="/contact.php">Contact</a>
                    </li>

                    <li>
                        <a href="/login.php">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

내가 올바르게 설정하고 있습니까?

(관련이없는 메모이지만 관련이있을 수 있습니까? 메뉴가 이동 될 때 메뉴 버튼을 클릭하면 축소됩니다. 다시 누르면 축소가 해제되지 않습니다. 따라서이 문제는 두 가지 모두 잘못된 JavaScript 설정을 의미합니다. 혹시?)

javascript  html  twitter-bootstrap  twitter-bootstrap-3 
— TheLettuceMaster
소스
3
제가 부트 스트랩 작업을 할 때부터 Boostrap이 관리하지 않는 것 같아요. 직접 활성 클래스를 설정해야합니다 ... 제가 틀렸다면 많은 것을 배울 것입니다 ...
— BENARD Patrick
1
@TheLittlePig가 맞습니다 active. 애플리케이션이 HTML을 생성 할 때 직접 클래스 를 추가해야합니다 .
— DavidG

답변:

143

문서에 다음과 같이 명시되어있는 동안 축소 된 부트 스트랩 js 파일 및 축소 / 전환 플러그인을 포함했습니다.

bootstrap.js와 bootstrap.min.js는 모두 단일 파일에 모든 플러그인을 포함합니다.
하나만 포함하십시오.

과

간단한 전환 효과의 경우 다른 JS 파일과 함께 transition.js를 한 번 포함합니다. 컴파일 된 (또는 축소 된) bootstrap.js를 사용하는 경우이를 포함 할 필요가 없습니다. 이미 포함되어 있습니다.

따라서 최소화 문제에 대한 문제가 될 수 있습니다.

활성 클래스의 경우 직접 관리해야하지만 한두 줄이면됩니다.

부트 스트랩 3 :

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

Bootply : http://www.bootply.com/IsRfOyf0f9

부트 스트랩 4 :

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
— 피트 TNT
소스
2
페이지에서 다른 페이지로 이동하면 작동합니까 href(해시가 아니라 다른 요청을 보냅니다)?
— Blaszard
1
단일 페이지가 아닌 앱 / 사이트의 @Blaszard는 기본적으로 항목 active에 대한 클래스 가 있어야합니다 nav.
— Pete TNT
나를 위해 작동하지 않습니다. 목록 항목이 활성 상태로 표시되지 않습니다!? 너희들이하고있는 내가 뭘 안하는거야?
— user465342
4
나를 위해 작동하지 않는 그, 그 추가하기하지만이에 페이지하시기 바랍니다 누군가의 도움에 머물고하지 그래서 다음 두 번째에있는 그것의 초기 활성 클래스로 이동
— sourav78611
10
@Pete TNT-사람들이 용액의 90 %를 제공하고 나머지 10 %를 적용하는 방법을 모두가 알고 있다고 가정하면 여전히 명확하지 않으며 매우 실망 스럽습니다. 특히 구문이 제대로 작동하기 어려운 시나리오에서.
— Dave
97

다음은 활성 페이지 전환을위한 솔루션이었습니다.

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
— Jon
소스
2
이걸 어디에 넣어야하나요? 죄송합니다; JS : #
— mrateb
2
이것은 Bootstrap 4에서 잘 작동합니다. @ Thomas8 : 이것은 태그 <script>와 </script> tags at the bottom of the html file before the </ body>`태그 사이에 있어야합니다 (모든 것이 하나의 html 파일에 있다고 가정).
— alwaysCurious
<script> 태그없이 site.js에 동일하게 추가되었고 $ (document) .ready (function () {$ ( 'li.active'). removeClass ( 'active'); $ ( 'a [href = " '+ location.pathname +'"] '). closest ('li '). addClass ('active ');});
— Oracular Man
나를 위해 이것은 부트 스트랩 3.3.7에서 작동하는 유일한 솔루션이었습니다.
— MitchellK
이 솔루션은 결국 저에게 효과적이었습니다. 나는 function : console.log (location.pathname)에 추가했고 <a href='foo/bar>에서 내가 <a href = 'foo / bar /로 변경하면 마지막 "/"를 놓쳤다는 것을 깨달았습니다. '>,이 기능은 navbar에서 오른쪽 "li"를 활성화하는 데 작동합니다.
— 에밀리
16

이것은 "window.location.pathname"이 실제 페이지 이름 앞에 데이터를 포함하기 때문에 완벽하게 작동했습니다 (예 : directory / page.php). 따라서 실제 navbar 링크는 URL에이 링크가 포함 된 경우에만 활성화됩니다.

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});
— Bettelbursche
소스
5
다른 모든 솔루션은 내가 하나씩 시도, 당신을 제외하고 작동하지 않습니다
— Lynob
14

3.3.4 버전의 부트 스트랩을 사용하면 긴 html 페이지에서 pg의 섹션을 참조 할 수 있습니다. body 요소로 spy-scroll로 활성 navbar 링크를 관리하려면 클래스 또는 ID별로 :

  <body data-spy="scroll" data-target="spy-scroll-id">

데이터 타겟은 id = "spy-scroll-id"인 div가됩니다.

    <div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>

이렇게하면 자바 스크립트 기능없이 클릭하여 링크를 활성화해야하며 js onclick ()이 수행하지 않는 페이지의 해당 링크 섹션을 스크롤 할 때 각 링크도 자동으로 활성화됩니다.

— 짐
소스
1
감사. 다음과 같아야합니다. data-target = "spy-scroll-id"가 아니라 data-target = "spy-scroll-id"
— Vdex
10

다음 과 같이 부트 스트랩 내비게이션 내 링크 에 data-toggle = "tab" 을 추가 하기 만하면됩니다 .

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
— 하칸 피스 티크
소스
이건 정말 유용하지만 당신은 네비게이션 바 - 탐색 (정상)하고있을 때 작동하지 않습니다 또한 네비게이션 바 오른쪽 두 번째 목록을. 삭제되지 않은 두 개의 활성 상태로 끝납니다
— Karl P
5
"data-toggle"을 추가하면 페이지가 href에 지정된 "#place"로 이동할 수 없습니다.
— scorpiozj
사실 업데이트입니다. @scorpiozj가 언급했듯이. 이것이 추가되면 링크 자체가 작동하지 않습니다
— mrateb
9

앵커 링크를 사용하지 않는 경우 다음과 같이 사용할 수 있습니다.

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});
— Zitrax
소스
6

Bootstrap 4에서는 다음을 사용할 수 있습니다.

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});
— 카를로스 쿠에 스타
소스
감사합니다, 다른 사람 (부트 스트랩 3)하지 작업했던 이유 단서 없다
— information_interchange
4

이 우아한 솔루션이 나를 위해 트릭을 수행했습니다. 새로운 아이디어 / 제안을 환영합니다.

$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );

jQuery의 "siblings ()"메소드를 사용하여 액세스 된 항목 만 활성 상태로 유지하고 형제 항목은 비활성 상태로 유지할 수 있습니다.

— JefferinJoseph
소스
3

나는 이것을 사용한다. 짧고 우아하며 이해하기 쉽습니다.

$(document).ready(function() {
    $('a[href$="' + location.pathname + '"]').addClass('active');
});
— Evaldas
소스
2

나는 오늘 이것으로 어려움을 겪고 있으며, 데이터 토글은 단일 페이지 응용 프로그램을 사용하는 경우에만 작동했습니다.

나는 실제로 다른 페이지에 대한 게시물 요청을하고있는 콘텐츠를로드하기 위해 ajax를 사용하지 않으므로 첫 번째 js 스크립트도 쓸모가 없었습니다. 이 줄로 해결합니다.

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
— 페르난도 아 술레이
소스
1

이 문제를 해결하는 데 도움이되기를 바랍니다.

      var navlnks = document.querySelectorAll(".nav a");
        Array.prototype.map.call(navlnks, function(item) {

            item.addEventListener("click", function(e) {

                var navlnks = document.querySelectorAll(".nav a"); 

                Array.prototype.map.call(navlnks, function(item) {

                    if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {

                        item.parentNode.className = "";

                    } 

                }); 

                e.currentTarget.parentNode.className = "active";
            });
        });
— 키릴 쉬르
소스
1

동적으로 생성 된 목록 항목 인 WordPress Stack을 사용하여이 작업에 약간의 고통이있었습니다.

이것을 추가하고 작동했습니다. 

$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});

즉석에서 할 것입니다.

— Someguywhocodes
소스
0

항목을 클릭 한 후 부트 스트랩 모바일 메뉴 축소 해제의 경우 다음을 사용할 수 있습니다. 

$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});
— 누룰 아민
소스
0

부트 스트랩 베어 테마를 사용하고 있습니다. 여기 샘플 navbar 코드가 있습니다. Java 스크립트에서 참조되는 요소-> .nav- 의 클래스 이름에 유의하십시오 .

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

보기 페이지 (또는 부분)에 다음을 추가하십시오. : javascript, 페이지가로드 될 때마다 실행되어야합니다.

haml보기 스 니펫->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

자바 스크립트 디버거에서 'href'속성 값이 window.location.pathname과 일치하는지 확인하세요. 이것은 내 문제를 해결하는 데 도움이 된 @Zitrax의 솔루션과 약간 다릅니다.

— 리시
소스
0

의 경우 다음 과 같은 함수와 함께 AngularJS사용할 수 있습니다 ng-class.

HTML->

<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
  <div class="container">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" >
        <li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>        
      </ul>
    </div>
</nav>

그리고 컨트롤러 

app.controller('NavCtrl', ['$scope', function($scope) {
    var vm = this;
    vm.Helper = {
        UpdateTabActive: function(sTab){
            return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
        }
    }    
}]);

$ location을 사용하는 경우 해시가 없습니다. 따라서 $ location을 사용하여 URL에서 필요한 문자열을 추출 할 수 있습니다.

다음은 모든 경우에 작동하지 않습니다->

다음과 같은 범위 변수를 사용하면 클릭 한 경우에만 작동하지만 $state.transitionTo또는 window.location을 사용하여 전환이 완료 되거나 URL을 수동으로 업데이트하면 Tab 값이 업데이트되지 않습니다.

<ul class="nav navbar-nav" ng-init="Tab='Home'">
   <li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
   <li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>
— 마헤 쉬
소스
0

이 JavaScript를 기본 js 파일에 추가하십시오. 

$(".navbar a").on("click", function(){
      $(".navbar").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });
— Md. Abunaser Khan
소스
3
솔루션에 대한 설명을 추가하십시오.
— sg7 2018
0

내 파일 이름이 내 탐색 모음 제목과 같지 않기 때문에 한 단계 더 나아가 야했습니다. 즉, 내 첫 번째 탐색 모음 링크는 HOME이지만 파일 이름은 index ..

따라서 경로 이름을 잡고 일치하십시오.

분명히 이것은 조잡한 예이며 더 효율적일 수 있지만 매우 사용자 정의 요구 사항입니다.

var loc_path = location.pathname;
$('li.active').removeClass('active');



if(loc_path.includes('index')){
    $('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
    $('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
    $('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
    $('li :eq(4)').addClass('active');
}
— Cparello
소스
0

나를 위해 일한 Bootstrap 4 솔루션 :

$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in 
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
  var currentPage = location.pathname;
  var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
  $('.nav-link').removeClass('active');
  $('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
     if (location.pathname == "/") {
         $('a[href*="index"]').closest('li').addClass('active');
    }
}
//Invoke function
activePage();
});

이것은 href 가 location.pathname을 포함하는 경우에만 작동합니다 !

자신의 PC (wamp, xampp, 램프 등을 사용)에서 사이트를 테스트하고 사이트가 일부 하위 폴더에있는 경우 경로는 실제로 "/somefolder/something.php"이므로 얻을 수 없습니다. 혼란스러워.

올바른 location.pathname을 확인할 수 있도록 다음 코드를 사용하는 것이 확실하지 않은 경우 제안합니다 .

$(document).ready(function() {
  alert(location.pathname);
});
— 루카 쉬
소스
0

다음 답변은 다단계 메뉴가있는 사람들을위한 것입니다.

var url = window.location.href;

var els = document.querySelectorAll(".dropdown-menu a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === url) {
       el.classList.add("active");
       var parent = el.closest(".main-nav"); // add this class for the top level "li" to get easy the parent
       parent.classList.add("active");
    }
}

작동 방식 예

— 미래
소스
0

자바 스크립트를 모르는 사람으로서, 여기 저에게 효과가 있고 이해하기 쉬운 PHP 방법이 있습니다. 내 전체 navbar는 내 페이지에서 포함하는 공통 구성 요소 파일에있는 PHP 함수에 있습니다. 예를 들어 내 'index.php'페이지에 ...`

<?php
   $calling_file = basename(__FILE__);
   include 'my_common_includes.php';    // Going to use my navbar function "my_navbar"
   my_navbar($calling_file);    // Call the navbar function
 ?>

그런 다음 'my_common_includes.php'에 ...

<?php
   function my_navbar($calling_file)
   {
      // All your usual nabvbar code here up to the menu items
      if ($calling_file=="index.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="index.php">Home</a>
</li>';
      if ($calling_file=="about.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="about.php">About</a>
</li>';
      if ($calling_file=="galleries.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="galleries.php">Galleries</a>
</li>';
       // etc for the rest of the menu items and closing out the navbar
     }
  ?>
— M61Vulcan
소스
0

Bootstrap 4에서는 li활성 클래스 의 항목 을 대상으로 지정해야합니다 . 그렇게하려면 a. 의 '히트 박스' a는 크기만큼 크지 li만 JS의 이벤트 버블 링으로 인해 이벤트를 다시 제공합니다 a. 따라서 부모에 수동으로 추가해야합니다.

  //set active navigation after click
  $(".nav-link").on("click", (event) => {
    $(".navbar-nav").find(".active").removeClass('active');
    $(event.target).parent().addClass('active');
  });
— 미켈란젤로
소스
0

처음 5 개의 솔루션과 다른 변형에 대해 시도했지만 효과가 없었습니다.

마지막으로이 두 가지 기능으로 작업했습니다.

$(document).on('click', '.nav-link', function () {
    $(".nav-item").find(".active").removeClass("active");
})

$(document).ready(function() {
    $('a[href="' + location.pathname + '"]').closest('.nav-item').addClass('active'); 
});
— Jukka S.
소스
0

navbar 코드의 모든 페이지에 header.php를 사용할 때 jquery가 작동하지 않고 active가 적용된 후 제거되는 간단한 해결책은 다음과 같습니다.

<?php $pageName = "index"; ?>인덱스 페이지 및 <?php $pageName = "contact"; ?>연락처 페이지의 모든 페이지 세트 변수

그런 다음 header.php를 호출합니다 (예 : 탐색 코드가 header.php에 있음). <?php include('header.php'); >

header.php에서 각 탐색 링크가 다음과 같은지 확인하십시오.

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

<a class="nav-link <?php if ($page_name == 'contact') {echo "active";} ?> href="contact.php">Contact Us</a>

이것이 jquery가 작동하도록 며칠을 보냈지 만 실패한 원인이되기를 바랍니다.

누군가가 header.php가 포함 된 다음 페이지가로드 될 때 문제가 정확히 무엇인지 친절하게 설명한다면 ... 왜 jquery가 활성 클래스를 nav-link에 추가하지 못하는지 .. ??

— 스리 칸스 카 마트
소스
0

부트 스트랩 4 탐색 모음 및 기타 링크 그룹에서 사용할 수있는 솔루션을 찾고 있습니다.

어떤 이유로 든 대부분의 솔루션은 특히 링크에 '활성'을 추가하려는 경우에 작동하지 않았습니다. 물론 링크를 클릭하면 다른 페이지로 이동하면 추가 한 '활성'이되지 않습니다. DOM이 변경 되었기 때문입니다. 다른 많은 솔루션은 종종 링크와 일치하지 않거나 둘 이상 일치했기 때문에 작동하지 않았습니다.

이 우아한 솔루션은 다른 링크 (예 : about.php, index.php 등)에 적합합니다.

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');
});

그러나 index.php? tag = a, index.php? tag = b, index.php? tag = c와 같은 다른 쿼리 문자열이있는 동일한 링크에 도달하면 클릭 한대로 모두 활성화되도록 설정합니다. 쿼리가 아닌 경로 이름과도 일치합니다.

그래서 나는 경로 이름과 쿼리 문자열과 일치하는이 코드를 시도했고 쿼리 문자열이있는 모든 링크에서 작동했지만 index.php와 같은 링크를 클릭하면 유사한 쿼리 문자열 링크도 활성화됩니다. 링크에 쿼리 문자열이 없으면 내 함수가 빈 문자열을 반환하고 다시 경로 이름과 일치하기 때문입니다.

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + returnQueryString(location.href.split("?")[1]) + '"]').addClass('active');
});
/** returns a query string if there, else an empty string */
function returnQueryString (element) {
   if (element === undefined)
      return "";
   else
      return '?' + element;
}

그래서 결국 나는이 경로를 포기하고 간단하게 유지하고 이것을 썼습니다.

$('.navbar a').each(function(index, element) {
    //console.log(index+'-'+element.href);
    //console.log(location.href);
    /** look at each href in the navbar
      * if it matches the location.href then set active*/
    if (element.href === location.href){
        //console.log("---------MATCH ON "+index+" --------");
        $(element).addClass('active');
    }
});

element.href와 location.href가 모두 전체 경로를 반환하기 때문에 쿼리 문자열이 있거나없는 모든 링크에서 작동합니다. 다른 메뉴 등의 경우 다른 예에 대한 상위 클래스 선택기 (navbar)를 간단히 변경할 수 있습니다.

$('.footer a').each(function(index, element)...

또한 중요해 보이는 마지막 것은 사용중인 js & css 라이브러리이지만 아마도 다른 게시물 일 것입니다. 이것이 도움이되고 기여하기를 바랍니다.

— 스티브 휘트 비
소스
-1 
$(document).ready(function() {
            
   var url = window.location.href;
            
   $('a[href*="'+url+'"]').addClass("active");
            
});
— 조이
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.