单击引导程序选项卡不起作用

Question

我正在为网站使用引导程序，并使用它带来的选项卡功能。 我看了看文档，相信一切都做对了。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <section id="works" class="ptb-80 bb-1"> <div class="container"> <div class="text-center"> <h2>How It Works?</h2> <div class="seperator"></div> </div> <div class="tabbable full-width-tabs"> <div class="tab-content"> <div class="tab-pane active" id="tab-one"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Build Your Own</span><br>Application Pool</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-two"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Search for</span><br>Uploaded Files</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-three"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Keep The Files</span><br>Safe and Secure</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-four"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Share with</span><br>Your Own Friends</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> </div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab-one" data-toggle="tab" class="primary-bg"> <i>1</i> <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5> </a> </li> <li> <a href="#tab-two" data-toggle="tab" class="secondary-bg"> <i>2</i> <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5> </a> </li> <li> <a href="#tab-three" data-toggle="tab" class="primary-bg"> <i>3</i> <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5> </a> </li> <li> <a href="#tab-four" data-toggle="tab" class="secondary-bg"> <i>4</i> <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5> </a> </li> </ul> </div> <!-- /tabbable --> </div> <!-- End Container --> </section> <!-- End Section --> 

我无法找到选项卡有什么问题，我没有更改javascript文件中的任何内容，因此它应该可以工作。 我不确定如何将引导程序包含到代码片段中，因此我正在使用引导程序v3.3.6。

在其他文章中，我没有看到任何不合适的地方。

Answer 1

您缺少bootstrap.js文件，将其添加即可使用。 参见下面的代码演示

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <section id="works" class="ptb-80 bb-1"> <div class="container"> <div class="text-center"> <h2>How It Works?</h2> <div class="seperator"></div> </div> <div class="tabbable full-width-tabs"> <div class="tab-content"> <div class="tab-pane active" id="tab-one"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Build Your Own</span><br>Application Pool</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-two"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Search for</span><br>Uploaded Files</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-three"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Keep The Files</span><br>Safe and Secure</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="tab-four"> <div class="row"> <div class="col-md-5 col-xs-12"> <img src="images/step-1.png" class="img-responsive" alt=""> </div> <div class="col-md-7 col-xs-12 ptb-40"> <div class="main-content p-20"> <h3><span>Share with</span><br>Your Own Friends</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum. </p> <div class="row"> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> <div class="col-md-6"> <ul class="list"> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li> <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li> </ul> </div> </div> </div> </div> </div> </div> </div> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab-one" data-toggle="tab" class="primary-bg"> <i>1</i> <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5> </a> </li> <li> <a href="#tab-two" data-toggle="tab" class="secondary-bg"> <i>2</i> <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5> </a> </li> <li> <a href="#tab-three" data-toggle="tab" class="primary-bg"> <i>3</i> <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5> </a> </li> <li> <a href="#tab-four" data-toggle="tab" class="secondary-bg"> <i>4</i> <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5> </a> </li> </ul> </div> <!-- /tabbable --> </div> <!-- End Container --> </section> <!-- End Section --> 

Answer 2

在文档中，我看到的所有选项卡示例都为选项卡列表中的定位标记分配了角色： https : //getbootstrap.com/docs/3.3/javascript/#tabs

 <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div> 

也许尝试添加角色？ 我认为角色影响了该项目的行为方式，因此与其充当锚链接，不如充当一个标签。