Monday, May 20, 2024
Homepage · html
 Popular · Latest · Hot · Upcoming
71
rated 0 times [  73] [ 2]  / answers: 1 / hits: 28750  / 6 Years ago, wed, march 28, 2018, 12:00:00

I'm new to HTML and JavaScript and right now I'm faced with a problem that I assume many of you have been dealing with yourself.



I have a nav-bar that doesn't by default changes the active-state when I click on a different page-reference.



The 'Home' nav-item is by default active, and I want to change the active state when I click on other nav-items. But I don't know how to do it? As far is I understand this isn't too many lines of code, but I'd love to get some assistance here.



Here's my code: 



<head>

    <meta charset=UTF-8>

    <title>MaU Movie database</title>

    <meta name=viewport content=width=device-width, initial-scale=1.0>

    <link rel=stylesheet href=https://bootswatch.com/4/cyborg/bootstrap.min.css>

    <link rel=stylesheet href=style.css>

    <link rel=icon href=mumdblogo.png>

</head>



<body>

    <nav class=navbar navbar-expand-lg navbar-dark bg-dark>

        <a class=navbar-brand href=index.html id=movielogo><img src=moviefylogo.png></a>

        <button class=navbar-toggler type=button data-toggle=collapse data-target=#navbarColor02 aria-controls=navbarColor02

            aria-expanded=false aria-label=Toggle navigation>

            <span class=navbar-toggler-icon></span>

        </button>



        <div class=collapse navbar-collapse id=navbarColor02>

            <ul class=navbar-nav mr-auto>

                <li class=nav-item active>

                    <a class=nav-link href=index.html>Home

                        <span class=sr-only>(current)</span>

                    </a>

                </li>

                <li class=nav-item>

                    <a class=nav-link href=library.html>Library</a>

                </li>

                <li class=nav-item>

                    <a class=nav-link href=uploads.html>Uploads</a>

                </li>

                <li class=nav-item>

                    <a class=nav-link href=about.html>About</a>

                </li>

            </ul>

        </div>

    </nav>



    <div class=container>

        <div class=jumbotron>

            <h3 class=text-center>Search Movie!</h3>

            <form id=searchForm>

                <input type=text class=form-control id=searchText placeholder=Search for any movie...>

            </form>

        </div>

    </div>



    <div class=container>

        <div id=movies class=row>

    </div>



    <script src=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>

    <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>

    <script src=https://unpkg.com/axios/dist/axios.min.js></script>

    <script src=https://code.jquery.com/jquery-1.10.2.js></script>

    <script src=main.js></script>



</body>

</html>

More From » html
 Answers
4

You can do this one an the end of your code. Just below <script src=main.js></script>



<script>

$(document).ready(function() {

    $( .mr-auto .nav-item ).bind( click, function(event) {

        event.preventDefault();

        var clickedItem = $( this );

        $( .mr-auto .nav-item ).each( function() {

            $( this ).removeClass( active );

        });

        clickedItem.addClass( active );

    });

});

</script>


And them instead of follow by link (event.preventDefault()) eg. about.html OR uploads.html this snipet of code change active class for clicked item.





EDIT 1:



For static pages (or served eg. by php) you don't need any aditional js code, BUT you should tweak nav to looks like in below examples (look where 'active' class is, sr-only span current is optional, but well placed in examples).



index.html (your base code)



<ul class=navbar-nav mr-auto>

    <li class=nav-item active>

        <a class=nav-link href=index.html>Home<span class=sr-only>(current)</span></a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=library.html>Library</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=uploads.html>Uploads</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=about.html>About</a>

    </li>

</ul>




library.html



<ul class=navbar-nav mr-auto>

    <li class=nav-item>

        <a class=nav-link href=index.html>Home</a>

    </li>

    <li class=nav-item active>

        <a class=nav-link href=library.html>Library<span class=sr-only>(current)</span></a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=uploads.html>Uploads</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=about.html>About</a>

    </li>

</ul>




uploads.html



<ul class=navbar-nav mr-auto>

    <li class=nav-item>

        <a class=nav-link href=index.html>Home</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=library.html>Library</a>

    </li>

    <li class=nav-item active>

        <a class=nav-link href=uploads.html>Uploads<span class=sr-only>(current)</span></a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=about.html>About</a>

    </li>

</ul>




about.html



<ul class=navbar-nav mr-auto>

    <li class=nav-item>

        <a class=nav-link href=index.html>Home</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=library.html>Library</a>

    </li>

    <li class=nav-item>

        <a class=nav-link href=uploads.html>Uploads</a>

    </li>

    <li class=nav-item active>

        <a class=nav-link href=about.html>About<span class=sr-only>(current)</span></a>

    </li>

</ul>



[#54831] Monday, March 26, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
chase
Add To Favorites
Follow
Total Points: 78
Total Questions: 106
Total Answers: 93
Location: Comoros
Member since Tue, Mar 14, 2023
1 Year ago
chase questions
Thu, Mar 31, 22, 00:00, 2 Years ago
Thu, Jul 1, 21, 00:00, 3 Years ago
Sun, Dec 20, 20, 00:00, 3 Years ago
Sat, Dec 12, 20, 00:00, 4 Years ago
Mon, Sep 14, 20, 00:00, 4 Years ago
View All
;