Question

我开始使用Bootstrap在Chrome扩展程序的项目中工作，该程序需要Bootstraps CSS库，Bootstrap js库和jQuery库。

问题在于，如果在浏览器（可切换药丸）上启动该项目，则工作正常，但直接在扩展程序上启动时，则根本无法工作（显示正常，但无法选择其他药丸且无法切换）。

尝试使用CDN以及扩展名文件夹中的文件。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Project</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="width:400px;">
  <h2>Dynamic Pills</h2>
  <p>TEST</p>
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
    <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
  </ul>
  
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>HOME1</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>MENU1</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>MENU2</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>MENU3</p>
    </div>
  </div>
</div>

</body>
</html>

Chrome扩展程序：项目在导航器上工作正常，但在chrome扩展程序上启动时不起作用

0 个答案: