我正在检查这个例子并在一个项目中实现它,但它给了我一个错误,源代码在这里; 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>
功能如下;
$('.next').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
});
给我一个错误的是这一行:
$('[href=#'+nextId+']').tab('show');
消息是这样的:
app.js:1541 Uncaught Error: Syntax error, unrecognized expression: [href=#step2]
我试图将其更改为此,但它仍然给我一个错误:
$('[href=#'+"\""+nextId+"\""+']').tab('show');
问题是
#
被解释为特殊字符而#
不是href
. 一个快速的解决方法是在选择器中添加引号以正确分隔它。所以不要这样做:你会这样做:
这将生成
'[href="#step2"]'
不会因该错误而失败的选择器:我知道 href 的正确选择器必须包含 a 标签,并且数字 # 是元字符,因此您必须使用两个斜杠将其转义,如下所示:
你能试一试并告诉我它是否适合你吗?