当我将JS版本更改为3.3.7时，Bootstrap选项卡停止工作

我检查了v 3.3.7上的Bootstrap文档，但也许我错过了一些东西。当我将JS版本更改为3.3.7时，Bootstrap选项卡停止工作

我的问题是，我的下拉（下）不工作时，我使用CDN自举JS v3.3.6，但是当我将其更改为v3.3.7它。

但是当我更改为v3.3.7，我的标签不再起作用。

当我删除的引导JS链接，标签重新工作。

<!doctype html> 
<html> 
<head> 
    <title>Quiz App!</title> 
    <link rel="icon" type="image/png" href="http://plainicon.com/dboard/userprod/2921_4eb4c/prod_thumb/plainicon.com-64851-256px-36c.png"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 


</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h2 id="header"><span class="glyphicon glyphicon-grain"></span> <small>(in development)</small></h2> </hr> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"><a href="/" aria-controls="home2" data-toggle="tab"><span class="glyphicon glyphicon-home"></span></a></li> 
       <li role="presentation" class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
         Featured Topics<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="/topics/us-presidents" data-toggle="tab">U.S. Presidents</a></li> 
         <li><a href="/topics/business" data-toggle="tab">Business & Investing</a></li> 
         <li><a href="/topics/astronomy" data-toggle="tab">Astronomy</a></li> 
         <li><a href="/topics/movies" data-toggle="tab">Movies</a></li> 
        </ul> 
       </li> 
       <li role="presentation"><a href="/all-quizzes" aria-controls="rankings" data-toggle="tab">All Quizzes</span></a></li> 
       <li role="presentation"><a href="/create-quiz" aria-controls="stats" data-toggle="tab">Create a Quiz</span></a></li> 
      </ul> 
     </div> 
    </div> 

     {{{body}}} 
</div> 
</body> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</html>

在此先感谢您的帮助。

来源

2016-08-30 Jake 1986

JS文件是否实际加载？检查您的浏览器控制台 – WillardSolutions

@EatPeanutButter感谢您的回复，当我检查Chrome控制台时，我没有看到任何“无法加载资源”消息。也就是说，我没有看到它列在Sources下，而我看到Sources标签下列出了Bootstrap CSS和Fonts文件。 –

问题的根源在于标签内链接的href。为了引导JS工作，链接应引用本地内容，例如一些DIV ID，如：

<a href="#all-quizzes" aria-controls="rankings" data-toggle="tab">All Quizzes</span></a>

引导JS击中它在你的链接的相对路径头部并抛出错误（当你点击选项卡时，你可以在控制台中看到它）。

如果您查看tabs.js的引导程序3.3.7源代码，您会看到它检查（第29行）clicked元素（tab）的data-target属性，如果它为空，则回退到href （第32行）。然后它尝试使用这个值作为jquery选择器（第51行）来查找元素，这在你的情况下失败。

例如，当您单击所有测验选项卡时，js会尝试执行此操作： $('/all-quizzes')并且会引发错误，因为它不是有效的jquery选择器。

来源

2016-08-30 19:26:34

谢谢！我结束了切换到导航栏，它正在工作。再次感谢您的洞察力。 –

当我将JS版本更改为3.3.7时，Bootstrap选项卡停止工作

回答

相关问题