我在这里创建了一个工作示例：http://www.bootply.com/A8Tz3gOsiD#
问题是在第二个药丸/标签后，后退按钮停止工作。无法弄清楚原因。奇怪的是＆＃34;下一步＆＃34;按钮通过所有标签/药丸正常工作。
我使用Ruby，并且也喜欢改进我的javascript，这非常糟糕，只是不确定如何...
答案 0 :(得分：0)
您的HTML ID属性不是唯一的
我修复了您的second back button for example
$(function(){
$('#setup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#setup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#setup"]').tab('show');
}),
$('#start-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#start"]').tab('show');
}),
$('#signup-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#signup-button2').click(function(e){
e.preventDefault();
$('#mytabs a[href="#signup"]').tab('show');
}),
$('#speed-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#speed"]').tab('show');
}),
$('#fulfill-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#fulfill"]').tab('show');
}),
$('#product-button').click(function(e){
e.preventDefault();
$('#mytabs a[href="#product"]').tab('show');
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid col-md-offset-1">
<div class="row col-md-offset-4 logo-pad">
<%= image_tag("navbar_brand.png") %>
</div>
<div class="col-md-12">
<%# if %>
<ul id="mytabs" class="nav nav-pills nav-wizard pill-font" role="tablist" data-tabs="tabs">
<li role="presentation" class="active"><a href="#start" data-toggle="tab">Before We Start</a></li>
<li role="presentation"><a href="#setup" aria-controls="Shopify Setup" role="tab">Shopify Setup</a></li>
<li role="presentation"><a href="#signup" aria-controls="Signing Up" role="tab">Signing Up</a></li>
<li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a></li>
<li role="presentation"><a href="#fulfill" role="tab">Fulfillment</a></li>
<li role="presentation"><a href="#product" role="tab">Products</a></li>
</ul>
<div class="tab-content well well-pad col-md-10">
<div role="tabpanel" class="tab-pane fade in active" id="start">
<p>Hi, welcome to FBA Shipping by ByteStand. We've tried to make all our apps super easy to use, and as painless as possible. With that in mind we've put together a step by step guide to setting up this app in your Shopify store. This shouldn't take more than 3 minutes, but please go get a hot coffee if it's in the morning, or a cold beverage any other time of day. Don't worry, we'll wait.</p>
<button type="button" id="setup-button" class="btn btn-primary pull-right">Next Step</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="setup">
<p>Perfect, now for our app to work you will need Real Time Carrier Calculated Shipping to be enabled on your Shopify account.
Real Time Carrier Calculated shipping is a setting on your Shopify account, but if that sounds a lot like gibberish, give Shopify a call and they can clarify. The phone numbers are below. It might be free if you paid for you Shopify subscription annually, or it might cost $20 or the equivalent. Don't let them tell you, that you have to upgrade your account to "advanced" or "unlimited", you don't.
</p><ul class="a">
<li>North America:: 1-888-746-7439</li>
<li>United Kingdom:: 0800-808-5233</li>
<li>Australia:: 03-8400-4750</li>
<li>New Zealand:: 07-788-6026</li>
<li>Singapore:: 800-181-1121</li>
</ul>
<p></p>
<button type="button" id="signup-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="start-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="signup">
<p>
Setting up the app is super easy. You've already download the app, now enter your credentials within the app. And you are good to go, there are instructions right next to where you enter your credentials, but we've also included pictures and a how to video below.
</p>
<button type="button" id="speed-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="setup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="speed">
<p class="h4">Allow us access to your Amazon account</p>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="signup-button2" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="fulfill">
<p class="h4">Promise your first born to Amazon by accepting their terms</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Next Step</button>
<button type="button" id="speed-button" class="btn btn-primary pull-right butt-pad">Back</button>
</div>
<div role="tabpanel" class="tab-pane fade" id="product">
<p class="h4">
Capture all your important id's and register for ByteStand
</p>
<button type="button" id="product-button" class="btn btn-primary pull-right">Sign Up</button>
<button type="button" id="fulfill-button" class="btn btn-primary pull-right">Back</button>
</div>
</div> <!-- closing of the tab content -->
</div> <!-- end of the columns for the whole page-->
</div><!-- end of the row for the whole page-->