A solução para a barra de navegação bootstrap não saltar: 1. Use "$ ('# myTabs a'). Click (function (e) {...}"; 2. Use a marca "data-toggle"; 3. Passe "Window .location "pode ser usado para pular.
O ambiente operacional deste tutorial: sistema Windows7, versão bootstrap3, este método é aplicável a todos os computadores da marca.
Recomendação:" Tutorial em vídeo de
bootstrap " Estou aprendendo a fazer bootstrap recentemente e vou fazer uma página inicial de um site pessoal. O front end está pronto para usar o bootstrap, porque o bootstrap é realmente muito bonito e popular. Se você tiver alguma dúvida, é fácil encontrar a resposta por meio do Baidu ou do Google.
Minha página tem a seguinte aparência: A
principal é usar o componente navbar do bootstrap para projetar um Minha própria barra de navegação achei que fosse uma questão simples e, finalmente, a barra de navegação não funcionou.
Problema:
1. A barra de navegação não muda o estado ativo da guia correspondente de acordo com o clique. O link pode saltar normalmente, mas a página inicial está sempre ativa.
Para isso, o problema era primeiro o Baidu. A possível razão é que a referência da biblioteca jquery está incorreta. A referência da biblioteca jquery deve estar antes da biblioteca bootstrap, porque O bootstrap depende da biblioteca jquery para funcionar.
Mas depois de verificar meu próprio código, descobri que meu pedido de referência não estava correto. Sem problemas.
Em seguida, encontrei essa frase no site oficial do bootstrap (usei o bootstrap3). A
captura de tela endereço: https://v3.bootcss.com/javascript/#tabs
Aqui mostra que existem duas maneiras de ativar guias, a primeira é através do seguinte código javascript:
1
2
3
$ ('# myTabs a'). click (function (e) { e.preventDefault () $ (this) .tab ('show')}) O segundo método é marcar por "data-toggle" 1 2 3 4 5 6
Depois de usar qualquer um dos métodos, o problema de que o estado ativo da barra de navegação não muda com o clique é resolvido, mas verifica-se que a barra de navegação está
Os atributos href de todas as tags na tag são inválidos. Mais tarde, eu pesquisei e descobri que o bootstrap trata o atributo href como um id e apenas links para a posição da página atual, enquanto links de redirecionamento externo são bloqueados.
Referência: (https://stackoverflow.com/questions/16785264/jquery-syntax-error)
2. Depois de resolver o primeiro problema, verifica-se que o link em navbar não pode saltar para um link externo.
Como mencionei anteriormente, os links externos foram bloqueados, e então tive que pensar em pular pelo js. Portanto, modifiquei o código de ativação do navbar para realizar o pulo por 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') }) })