'bootstrap nav-item'에 해당되는 글 1건

# nav 사용법 알아보기


- class = "nav" // nav 명시 

- class = "nav-item" // 항목추가

- class = "nav-link" // 항목추가



# body 코드 부분

<!-- nav 적용  -->
    <ul class="nav bg-light">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link3</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link4</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>

    <script>
        $(function () {
            // actvie 활성화 
            $(".nav-item > .active").css("color", "red");
            
            $('.nav-link').click(function () {
                // .nav-link 클릭시 이전의 active 값 해제 후, 
                $(".nav-item > .active").css("color", "#007bff");
                $('.nav-link').removeClass('active');

                // 클릭한 위치 active 적용 
                $(this).addClass('active');
                $(".nav-item > .active").css("color", "red");
            });
        });
    </script>

# 전체코드

...더보기

<!doctype html>

<html lang="en">

 

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"

        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 

    <title>Hello, world!</title>

    <!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"

        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"

        crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"

        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"

        crossorigin="anonymous"></script>

</head>

 

<body>

    <!-- nav 적용  -->

    <ul class="nav bg-light">

        <li class="nav-item">

            <a class="nav-link active" href="#">Home</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link1</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link2</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link3</a>

        </li>

        <li class="nav-item">

            <a class="nav-link" href="#">Link4</a>

        </li>

        <li class="nav-item">

            <a class="nav-link disabled" href="#">Disabled</a>

        </li>

    </ul>

 

    <script>

        $(function () {

            // actvie 활성화 

            $(".nav-item > .active").css("color""red");

            

            $('.nav-link').click(function () {

                // .nav-link 클릭시 이전의 active 값 해제 후, 

                $(".nav-item > .active").css("color""#007bff");

                $('.nav-link').removeClass('active');

 

                // 클릭한 위치 active 적용 

                $(this).addClass('active');

                $(".nav-item > .active").css("color""red");

            });

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

,