The solution for bootstrap navigation bar not jumping: 1. Use "$('#myTabs a').click(function (e){...}"; 2. Use "data-toggle" mark; 3. Pass "Window.location" can be used to jump.
The operating environment of this tutorial: Windows7 system, bootstrap3 version, this method is applicable to all brand computers.
Recommendation: "Bootstrap Video Tutorial" I
am learning bootstrap recently, and I am going to make a personal website homepage. The front end is ready to use bootstrap, because bootstrap is indeed very beautiful and popular. If you have any questions, it is easy to find the answer through Baidu or Google.
My page looks like this: The
main thing is to use the navbar component of bootstrap to design one My own navigation bar thought it was a simple matter, and finally the navigation bar did not work.
Problem:
1. The navigation bar does not switch the active state of the corresponding tab according to the click. The link can jump normally, but the Home is always active.
For this The problem was first Baidu. The possible reason is that the reference of the jquery library is incorrect. The reference of the jquery library must be before the bootstrap library, because bootstrap depends on the jquery library to work.
But after I checked my own code, I found that my reference order was not correct. No problem.
Next, I found such a sentence (I use bootstrap3) on the bootstrap official website. The
screenshot address: https://v3.bootcss.com/javascript/#tabs
Here shows that there are two ways to activate tabs, first One is through the following javascript code:
1
2
3
$('#myTabs a').click(function (e) { e.preventDefault() $(this).tab('show')}) The second method is to mark by "data-toggle" 1 2 3 4 5 6
After using either method, the problem that the navbar active state does not change with the click is solved, but it is found that the navbar is
The href attributes of all the tags in the tag are invalid. Later, I searched and found that bootstrap treats the href attribute as an id and only links to the position of the current page, while external redirect links are blocked.
Reference: (https://stackoverflow.com/questions/16785264/jquery-syntax-error)
2. After solving the first problem, it turns out that the link in navbar cannot jump to an external link.
As mentioned earlier, external links were blocked, and then I had to think of jumping through js. Therefore, I modified the activation code of navbar to realize jumping through window.location.
1
2
3
4
5
6
7
$(function () { $("#myBar li").click(function (e) { e.preventDefault() $(this).tab('show') window.location.href ='http://localhost:3000' + $(this).children('a').attr('href') }) })