How to solve the problem of bootstrap navigation bar not jumping

The solution to the problem that the bootstrap navigation bar does not jump: 1. Use "$('#myTabs a').click(function (e){...}" method; 2. Use "data-toggle" " mark; 3. Jump through "window.location".

The operating environment of this tutorial: Windows 7 system, bootstrap version 3, this method is suitable for All brands of computers.

Recommendation: "bootstrap video tutorial"

I am learning bootstrap recently and am preparing to make the homepage of a personal website. The front end is going to be done using bootstrap , because bootstrap is indeed very beautiful and popular. If you have questions, it is easy to find answers through Baidu or Google.

My page probably looks like this:

Mainly I used bootstrap’s navbar component to design my own navigation bar. I thought it was a simple thing, but in the end the navigation bar didn’t work.

Problem:

1. The navigation bar didn’t work. Click to switch the active state of the corresponding tab. The link can jump normally, but Home is always active.

For this problem, we first searched Baidu. The possible reason is that the jquery library reference is incorrect. The jquery library The reference must be before the bootstrap library, because bootstrap relies on the jquery library to work.

But after I checked my code, I found that there was no problem with my reference order.

Next, I I found this sentence on the bootstrap official website (I am using bootstrap3)

Screenshot address: https://v3.bootcss.com/javascript/#tabs

This shows that there are two ways to activate tabs. The first is through the following javascript code:

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')})

The second is through the "data-toggle" mark

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

Use any After a method, the problem of navbar active status not changing with clicks was solved, but it was found that the href attributes of all tags in the navigation bar, that is, the

tags, were invalid. Later, it was also the case. After searching, I found that bootstrap treats the href attribute as an ID and only links to the location of the current page, while external jump links are blocked.

Reference: (https://stackoverflow.com/questions/16785264/ jquery-syntax-error)

2. After solving the first problem, it was found that the link in the navbar cannot jump to an external link.

As mentioned earlier, external links were blocked, and later I had to think of jumping through js. Therefore, I modified the activation code of navbar and implemented the jump through window.location.

$(function () {
      $("#myBar li").click(function (e) {
        e.preventDefault()
        $(this).tab('show')      
        window.location.href = 'http://localhost:3000' + $(this).children('a').attr('href')
      })
 })

This solves the problem of bootstap navigation bar. But I always feel that there should be a better solution, and I hope a friend can give me some advice.

The above is the detailed content of How to solve the problem of bootstrap navigation bar not jumping. For more information, please follow other related articles on the PHP Chinese website!