I was checking this example and implementing it in a project but it gives me an error, the source code is here; https://www.bootply.com/D4A2AglssW#
HTML:
<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>
The function is the following;
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
});
What gives me an error is the line:
$('[href=#'+nextId+']').tab('show');
And the message is this:
app.js:1541 Uncaught Error: Syntax error, unrecognized expression: [href=#step2]
I tried to change it to this but it still gives me an error:
$('[href=#'+"\""+nextId+"\""+']').tab('show');
The problem is that the
#
is being interpreted as a special character instead of the literal#
within thehref
. A quick fix would be to add quotes to the selector to delimit it correctly. So instead of doing this:You would do this:
Which will generate the selector
'[href="#step2"]'
that won't fail with that error:I understand that the correct selector for href must include the a tag, and also the numeral # is a metacharacter so you must escape it with two slashes like this:
Can you try it and tell me if it works for you?