-1

Hello people need help my bootstrap navigations focus is not changing when i click on other links. Links changes but the focus stays on Home link.

I have seen many post with the same problem and tried all the possible solution. Still i am not able to understand why it is not working.

Below is the pen.

http://codepen.io/iamsakib/pen/wGmWEe?editors=1000

my head looks like this:

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Welcome</title>
    <link href="css/resets.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Please help me.

Thanks.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sakib
  • 171
  • 1
  • 9
  • Since you have tried many things, can you detail what you have tried to help us assist you? – Goose Apr 13 '16 at 13:10
  • 1
    Not sure what you mean. Active state is not created by clicking on a link. It's created by setting the 'active' class in the link. – Carol Skelly Apr 13 '16 at 13:10
  • @EoghanTadhg not the issue here, see my answer. – Goose Apr 13 '16 at 13:11
  • @EoghanTadhg I tried that answer but there was no result – Sakib Apr 13 '16 at 13:15
  • 1
    your codepen example works fine..what is the problem then? – Koustav Ray Apr 13 '16 at 13:33
  • Yes its working on pen now but not working on my project when i am running it. – Sakib Apr 13 '16 at 13:36
  • i figured it out what's the exact query is. The above pen works fine. but when i use href and link to a page it only redirects but not changes the active state. Like in this example active state is set at home but when i click to contact us it redirects me to contact us page but active state still remains at home. I want when i click on other link the page should redirect and active state as well. – Sakib Apr 13 '16 at 17:44

2 Answers2

0

Anytime you have an issue, open inspect element. Go to console and you'll see this error.

Uncaught Error: Bootstrap's JavaScript requires jQuery

You need to include the jQuery library for bootstrap JavaScript to work.

Goose
  • 4,764
  • 5
  • 45
  • 84
  • Thx for your answer Goose. But i have included jquery above the bootstrap.min.js. I tried looking into my console but it doesn't show anything. – Sakib Apr 13 '16 at 13:19
  • @Sakib fix your codepen to include jQuery so that we can see what you're seeing. – Goose Apr 13 '16 at 13:21
0

As explained in the other answer, you need to set the active state.

$('.nav>li').click(function(){
    $('.active').toggleClass("active");
    $(this).toggleClass("active");
})

http://codeply.com/go/m69a3wUly3

Your Codepen is failing for 2 reasons:

  1. jquery is included after bootstrap.js
  2. you don't have any JS to set the active class in the navbar
Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    It works fine on my pen now after adding the above code in js file. But it is not working with my project when i run it. I am using VS 2013, Can there be an IDE issue? – Sakib Apr 13 '16 at 13:33
  • Double check the console for errors. If we can't recreate the problem it's hard to know. – Carol Skelly Apr 13 '16 at 13:46