0

estuve checando este ejemplo e implementarlo en un proyecto pero me da error, el codigo fuente esta aqui; https://www.bootply.com/D4A2AglssW#

HMTL:

<div class="container" id="myWizard">
   <div class="navbar">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
               <li><a href="#step4" data-toggle="tab">Step 4</a></li>
               <li><a href="#step5" data-toggle="tab">Step 5</a></li>
            </ul>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane active" id="step1">
         <p>Here is the content for the first step...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         <p>Here is the content for step 2...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         <p>Here is the content for step 3...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step4">
         <p>Here is the content for step 4...</p>
         <a class="btn btn-default next" href="#">Continue</a>
      </div>
      <div class="tab-pane" id="step5">
         <p>This is the last step. You're done.</p>
         <a class="btn btn-success first" href="#">Start over</a>
      </div>
   </div>
</div>

La funcion es la siguiente;

$('.next').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

});

Lo que me da error es la linea:

$('[href=#'+nextId+']').tab('show');

Y el mensaje es este:

app.js:1541 Uncaught Error: Syntax error, unrecognized expression: [href=#step2]

intente cambiarlo por este pero aun me da error:

$('[href=#'+"\""+nextId+"\""+']').tab('show');
1
  • 2
    Deberias incluir tu HTML.
    – alanfcm
    el 17 dic. 2018 a las 16:02

2 respuestas 2

4

El problema es que el # se está interpretando como un carácter especial en lugar de como el literal # dentro del href. Una solución rápida sería añadir comillas al selector para delimitarlo de manera correcta. Así en lugar de hacer esto:

$('[href=#'+nextId+']').tab('show');

Harías esto:

$('[href="#'+nextId+'"]').tab('show');

Que generará el selector '[href="#step2"]' que no fallará con ese error:

Nota: he añadido Bootstrap para que se vea mejor que ya funciona (en lugar de dar un error diferente con el ejemplo anterior que tenía)

$('.next').click(function() {

  var nextId = $(this).parent('.tab-pane').next().attr("id");
  $('[href="#' + nextId + '"]').tab('show');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<div class="container" id="myWizard">
  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav nav-pills">
        <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
        <li><a href="#step2" data-toggle="tab">Step 2</a></li>
        <li><a href="#step3" data-toggle="tab">Step 3</a></li>
        <li><a href="#step4" data-toggle="tab">Step 4</a></li>
        <li><a href="#step5" data-toggle="tab">Step 5</a></li>
      </ul>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="step1">
      <p>Here is the content for the first step...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step2">
      <p>Here is the content for step 2...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step3">
      <p>Here is the content for step 3...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step4">
      <p>Here is the content for step 4...</p>
      <a class="btn btn-default next" href="#">Continue</a>
    </div>
    <div class="tab-pane" id="step5">
      <p>This is the last step. You're done.</p>
      <a class="btn btn-success first" href="#">Start over</a>
    </div>
  </div>
</div>

1
  • Necesitaría mirar el motivo exacto, pero creo que es porque # se utiliza para especificar un id y lo estás usando en mitad de una expresión (al menos no donde el navegador la espera), haciéndola incorrecta.
    – Alvaro Montoro
    el 17 dic. 2018 a las 17:28
1

Entiendo que el selector correcto para href debe incluir la etiqueta a, y además el numeral # es un metacaracter por lo que debes escaparlo con dos barras así:

$('a[href=\\#'+nextId+']').tab('show');

Puede intentarlo y decirme si le funciona?

4
  • No me funciono :/ el 17 dic. 2018 a las 16:10
  • Ahí edité mi comentario y sumé el hecho de que al ser un metacaracter debes escapar el numera con dos barras así \\
    – Pedro
    el 17 dic. 2018 a las 16:26
  • app.js:14151 Uncaught TypeError: Cannot read property 'nodeName' of undefined ahora me dice esto jaja el 17 dic. 2018 a las 16:44
  • Eso es otra cosa totalmente diferente a tu pregunta inicial, de acuerdo a tu pregunta inicial el problema era que jQuery no detectaba el selector, eso está solucionado, ahora tu problema parece que tiene más que ver con el hecho de que el html puede estar mal formateado. Considera abrir otra pregunta con el error actual y poner TODO el código con el que estás trabajando ya que se hace muy difícil debuggear con faltantes de código.
    – Pedro
    el 17 dic. 2018 a las 17:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.