Jquery and Bootstrap intergration

I was trying to find how to make the active class be added in onloading the page. For some reason it doesn't work here is my code:

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">

  <div class="container">

    <a class="navbar-left" href="index.html"><img src="img/logo.png" /></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

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

    </button>



    <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">

                <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="#products">Products</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="#about">About Us</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="contact.html">Contact Me</a>

            </li>

        </ul>

    </div>

  </div>

</nav>

Jquery file

$(document).ready(function () {

    var url = window.location;

    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    $('ul.nav a').filter(function() {

        return this.href == url;

    }).parent().addClass('active');

});

One small detail is on the home page I have section tags, but they do have their own respective pages. /products /aboutus etc

asked Nov 24 '18 at 4:12

Jona

205

If you console.log the url, what's the result?

– Tico
Nov 24 '18 at 4:20

you supposed to do var url = window.location.href?

– secret super star
Nov 24 '18 at 4:25

Actually gives an error before it excutes saying: $ is not defined at onLoad.js:1. Just standard scripttag: <script src="vendor/jquery/script.js" type="text/javascript"></script>

– Jona
Nov 24 '18 at 4:26

the jquery is not included correctly.

– secret super star
Nov 24 '18 at 4:28

Import jQuery from a CDN

– Tico
Nov 24 '18 at 4:29

|
show 3 more comments

I was trying to find how to make the active class be added in onloading the page. For some reason it doesn't work here is my code:

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">

  <div class="container">

    <a class="navbar-left" href="index.html"><img src="img/logo.png" /></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

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

    </button>



    <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">

                <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="#products">Products</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="#about">About Us</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="contact.html">Contact Me</a>

            </li>

        </ul>

    </div>

  </div>

</nav>

Jquery file

$(document).ready(function () {

    var url = window.location;

    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    $('ul.nav a').filter(function() {

        return this.href == url;

    }).parent().addClass('active');

});

One small detail is on the home page I have section tags, but they do have their own respective pages. /products /aboutus etc

asked Nov 24 '18 at 4:12

Jona

205

If you console.log the url, what's the result?

– Tico
Nov 24 '18 at 4:20

you supposed to do var url = window.location.href?

– secret super star
Nov 24 '18 at 4:25

Actually gives an error before it excutes saying: $ is not defined at onLoad.js:1. Just standard scripttag: <script src="vendor/jquery/script.js" type="text/javascript"></script>

– Jona
Nov 24 '18 at 4:26

the jquery is not included correctly.

– secret super star
Nov 24 '18 at 4:28

Import jQuery from a CDN

– Tico
Nov 24 '18 at 4:29

|
show 3 more comments

I was trying to find how to make the active class be added in onloading the page. For some reason it doesn't work here is my code:

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">

  <div class="container">

    <a class="navbar-left" href="index.html"><img src="img/logo.png" /></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

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

    </button>



    <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">

                <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="#products">Products</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="#about">About Us</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="contact.html">Contact Me</a>

            </li>

        </ul>

    </div>

  </div>

</nav>

Jquery file

$(document).ready(function () {

    var url = window.location;

    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    $('ul.nav a').filter(function() {

        return this.href == url;

    }).parent().addClass('active');

});

One small detail is on the home page I have section tags, but they do have their own respective pages. /products /aboutus etc

asked Nov 24 '18 at 4:12

Jona

205

I was trying to find how to make the active class be added in onloading the page. For some reason it doesn't work here is my code:

<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">

  <div class="container">

    <a class="navbar-left" href="index.html"><img src="img/logo.png" /></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

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

    </button>



    <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav mr-auto">

            <li class="nav-item">

                <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="#products">Products</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="#about">About Us</a>

            </li>



            <li class="nav-item">

                <a class="nav-link" href="contact.html">Contact Me</a>

            </li>

        </ul>

    </div>

  </div>

</nav>

Jquery file

$(document).ready(function () {

    var url = window.location;

    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    $('ul.nav a').filter(function() {

        return this.href == url;

    }).parent().addClass('active');

});

One small detail is on the home page I have section tags, but they do have their own respective pages. /products /aboutus etc

jquery twitter-bootstrap

asked Nov 24 '18 at 4:12

Jona

205

asked Nov 24 '18 at 4:12

Jona

205

asked Nov 24 '18 at 4:12

Jona

205

asked Nov 24 '18 at 4:12

Jona

205

asked Nov 24 '18 at 4:12

Jona

205

If you console.log the url, what's the result?

– Tico
Nov 24 '18 at 4:20

you supposed to do var url = window.location.href?

– secret super star
Nov 24 '18 at 4:25

Actually gives an error before it excutes saying: $ is not defined at onLoad.js:1. Just standard scripttag: <script src="vendor/jquery/script.js" type="text/javascript"></script>

– Jona
Nov 24 '18 at 4:26

the jquery is not included correctly.

– secret super star
Nov 24 '18 at 4:28

Import jQuery from a CDN

– Tico
Nov 24 '18 at 4:29

|
show 3 more comments

If you console.log the url, what's the result?

– Tico
Nov 24 '18 at 4:20

you supposed to do var url = window.location.href?

– secret super star
Nov 24 '18 at 4:25

Actually gives an error before it excutes saying: $ is not defined at onLoad.js:1. Just standard scripttag: <script src="vendor/jquery/script.js" type="text/javascript"></script>

– Jona
Nov 24 '18 at 4:26

the jquery is not included correctly.

– secret super star
Nov 24 '18 at 4:28

Import jQuery from a CDN

– Tico
Nov 24 '18 at 4:29

If you console.log the url, what's the result?

– Tico
Nov 24 '18 at 4:20

you supposed to do var url = window.location.href?

– secret super star
Nov 24 '18 at 4:25

Actually gives an error before it excutes saying: $ is not defined at onLoad.js:1. Just standard scripttag: <script src="vendor/jquery/script.js" type="text/javascript"></script>

– Jona
Nov 24 '18 at 4:26

the jquery is not included correctly.

– secret super star
Nov 24 '18 at 4:28

Import jQuery from a CDN

– Tico
Nov 24 '18 at 4:29

|
show 3 more comments

1 Answer
1

active

oldest

votes

Try below code:

$(document).ready(function ($) {

    var url = window.location.href;

    var activePage = url;

    $('.nav-item a').each(function () {

        var linkPage = this.href;



        if (activePage == linkPage) {

            $(this).closest("li").addClass("active");

        }

    });

});

answered Nov 24 '18 at 4:58

secret super star

1,025115

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53455080%2fjquery-and-bootstrap-intergration%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Try below code:

$(document).ready(function ($) {

    var url = window.location.href;

    var activePage = url;

    $('.nav-item a').each(function () {

        var linkPage = this.href;



        if (activePage == linkPage) {

            $(this).closest("li").addClass("active");

        }

    });

});

answered Nov 24 '18 at 4:58

secret super star

1,025115

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

add a comment |

Try below code:

$(document).ready(function ($) {

    var url = window.location.href;

    var activePage = url;

    $('.nav-item a').each(function () {

        var linkPage = this.href;



        if (activePage == linkPage) {

            $(this).closest("li").addClass("active");

        }

    });

});

answered Nov 24 '18 at 4:58

secret super star

1,025115

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

add a comment |

Try below code:

$(document).ready(function ($) {

    var url = window.location.href;

    var activePage = url;

    $('.nav-item a').each(function () {

        var linkPage = this.href;



        if (activePage == linkPage) {

            $(this).closest("li").addClass("active");

        }

    });

});

answered Nov 24 '18 at 4:58

secret super star

1,025115

Try below code:

$(document).ready(function ($) {

    var url = window.location.href;

    var activePage = url;

    $('.nav-item a').each(function () {

        var linkPage = this.href;



        if (activePage == linkPage) {

            $(this).closest("li").addClass("active");

        }

    });

});

answered Nov 24 '18 at 4:58

secret super star

1,025115

answered Nov 24 '18 at 4:58

secret super star

1,025115

answered Nov 24 '18 at 4:58

secret super star

1,025115

answered Nov 24 '18 at 4:58

secret super star

1,025115

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

add a comment |

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

Boom! That works thank you sir!

– Jona
Nov 24 '18 at 5:07

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg