javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页-6ren

javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页

转载作者：行者123 更新时间：2023-11-29 18:05:20

我是 bootstrap 的新手，我被卡住了。我相信我正在导入正确的脚本以在我的页面上使用 Bootstrap ，但是每当我点击“阅读”按钮时，唯一发生的事情就是“#”被添加到我的网址(侧面导航栏应该出现).当我在 jfiddle 上使用这个完全相同的代码时 - https://jsfiddle.net/2373rjko/ -(减去头部)，一切正常。这让我相信我没有正确安装 Bootstrap 或 jquery。
请您看一下我的代码并确保我正在调用我需要的库。非常感谢!!
这是我的代码:

index.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum- scale=1,width=device-width">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="theme-color" content="#000000">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Imagining Ancient Cornith</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="assets/js/ver.js"></script>
    <!-- Load Leaflet - map application -->
 <link rel="stylesheet" href="leaflet/leaflet.css"/>
 <script src="leaflet/leaflet.js"></script>
 <script src="leaflet/shp.js"></script>
 <script src="leaflet/catiline.js"></script>
 <script src="leaflet/leaflet.shpfile.js"></script>
</head>

 <body>
 <div class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
   <div class="navbar-icon-container">
     <a href="#" class="navbar-icon pull-right visible-xs" id="nav-btn"><i class="fa fa-bars fa-lg white"></i></a>
     <a href="#" class="navbar-icon pull-right visible-xs" id="sidebar-toggle-btn"><i class="fa fa-search fa-lg white"></i></a>
  </div>
  <a class="navbar-brand" href="#">IAC</a>
</div>
<div class="navbar-collapse collapse">
  <form class="navbar-form navbar-right" role="search">
    <div class="form-group has-feedback">
      <input id="searchbox" type="text" placeholder="Search" class="form-control">
      <span id="searchicon" class="fa fa-search form-control-feedback"></span>
    </div>
  </form>
   <ul class="nav navbar-nav">
     <li class="dropdown">
       <a id="toolsDrop" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe white"></i>&nbsp;&nbsp;Resources <b class="caret"></b></a>
       <ul class="dropdown-menu">
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="full-extent-btn"><i class="fa fa-arrows-alt"></i>&nbsp;&nbsp;About</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Home</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Culture Essays</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Vocab</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Grammar</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Media</a></li>
         <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="legend-btn"><i class="fa fa-picture-o"></i>&nbsp;&nbsp;Activities</a></li>
         <li class="divider hidden-xs"></li>
        <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="login-btn"><i class="fa fa-user"></i>&nbsp;&nbsp;Login</a></li>
       </ul>
     </li>
     <li class="dropdown">
      <a class="dropdown-toggle" id="downloadDrop" href="#" role="button" data-toggle="dropdown"><i class="fa fa-cloud-download white"></i>&nbsp;&nbsp;Table Of Contents <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 1</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 2</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 3</a></li>
        <li><a href="#" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i>&nbsp;&nbsp;Book 4</a></li>
      </ul>
      </li>
      <li class="hidden-xs"><a id="readings-btn" href="#" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-list white"></i>&nbsp;&nbsp;Readings</a></li>
    </ul>
   </div><!--/.navbar-collapse -->
  </div>
 </div>
<div class="container-fluid">
 <div id="sidebar" class="col-xs-2 bg-warning">
   <h4>Options</h4>
    <ul>
      <li>Pre Readings</li>
      <li>Passage</li>
      <li>Post Readings</li>
      <li>Media</li>
      <li>Questions</li>
    </ul>
</div>
<div id="map" class="col-xs-5 bg-info">

</div>
<div id="text-container" class="col-xs-5 bg-success">
  <div id="text-title"> I am a title </div>
  <div id="text-content"> Hey, I guess this is where our readings are going to be located.</div>
</div>

这是我的 JS 文件 assets/js/ver.js

  $("#readings-btn").on("click", function(e){ 
 if($("#sidebar").is(":hidden")){
   $("#sidebar").show();
   $("#map").removeClass("col-xs-6").addClass("col-xs-5");
   $("#text-container").removeClass("col-xs-6").addClass("col-xs-5");
} else {
   $("#sidebar").hide();
   $("#map").removeClass("col-xs-5").addClass("col-xs-6");
   $("#text-container").removeClass("col-xs-5").addClass("col-xs-6");
}
});

最佳答案

尝试将代码包装在里面

 $(document).ready(function(){
   // your code here
 });

Jsfiddle 默认这样做

关于javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31733105/

文章推荐： Android 从 ListView 和 SQLite 数据库中删除一个值

文章推荐： android - 获取 SQLite 空闲空间 %

文章推荐： mysql - 阿里云RDS版(MySQL)修改白名单设置Token错误

javascript - 使用 JFiddle 创建网页
我正在尝试了解如何将以下 JFiddle 示例转换为单个 html 网页: http://jsfiddle.net/zqa511e9/ 哪里做错了？样式和 javascript 代码都没有反射(ref
javascript - 无法使 jfiddle 示例工作
我是 AJAX 编程新手，但我在 jfiddle 上找到了一个与我想要实现的目标非常接近的示例。然而我无法让它发挥作用。我在标题中放置了对同一版本 jquery 的引用，但是当我点击“我的版本”上的提
javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页
我是 bootstrap 的新手，我被卡住了。我相信我正在导入正确的脚本以在我的页面上使用 Bootstrap ，但是每当我点击“阅读”按钮时，唯一发生的事情就是“#”被添加到我的网址(侧面导航栏应该
html - 包含全宽 CSS jfiddle 子菜单的水平菜单
我想制作一个水平下拉菜单，很像博闻网的主菜单:http://home.howstuffworks.com/community-living 注意子菜单如何覆盖水平主菜单栏的整个宽度，而不是在垂直列表中
css3 适用于 jfiddle 但不适用于 IE
这是我的简单代码 http://jsfiddle.net/6hLf6/1/ 当我在我的 IE 上打开 jsfiddle 时，它运行良好。但是当我在本地打开代码时，它看起来像这样: 我正在使用 I
Javascript FileReader 在 jfiddle 中工作，但在我的浏览器中不起作用
我有一个文件阅读器，可以在 jfiddle 上运行，但不能在任何浏览器中运行。我使用所有最新的浏览器。它会让我选择文件，但之后什么也没有发生。我对 javascript 很陌生。 javacript
jquery 效果在 jfiddle 中有效，但不能在线 - 请帮忙
几个小时后仍在尝试解决此问题。该脚本在 jfiddle 中运行:http://jsfiddle.net/uCcYw/3/ ,将闪光效果应用于add_item (simplecart_shelfitem
javascript - jquery 鼠标悬停不工作。只在 jfiddle 工作
这只是几行代码:http://jsfiddle.net/z7bHt/ HTML: JavaScript: $("#bowleft").mouseenter(function(){ con
css - 几个小时但仍然停留在下拉子菜单上 - 继承的 css 在父菜单下创建空框 - jfiddle incl
我已经尝试了几个小时来找出如何摆脱出现在我的 CSS 菜单上的奇怪框。有两层子菜单。第二级子菜单位于我想要它的父菜单右侧的位置，但是一旦它出现 - 悬停时 - 父菜单下方也会出现一个相同高度的框。这个
css - 坚持创建 CSS 子菜单，其中一个特定的下拉菜单具有不同的宽度 - jfiddle incl
抱歉，如果这真的很初级，但我有一个打字机博客，上面有一个水平导航菜单。一些子菜单项的名称非常长(每个客户不可更改)——幸运的是它们都在一个“部分”中。由于宽度样式适用于所有子菜单，因此仅加宽子菜单对模
javascript - 短脚本(<50 行)适用于 jfiddle 但不适用于浏览器
我在元素中使用水平滚动图片库。最近滚动停止工作，我一直在试图找出原因。最终我决定回到元素这部分的源代码并开始工作，但我什至无法运行它。我一定是做错了什么——有什么想法吗？ the fiddle 我
javascript - 为什么 jQuery 脚本可以在 jFiddle 上运行，但不能在我的本地机器上运行？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 7 年前。编辑问题以包含 desired behavior, a specific probl
html - float 无序列表 - 适用于 jfiddle 而不是浏览器(尝试更新 chrome 和 firefox)
我需要 float 一个无序列表。问题是:我做不到。我找到了一个完全符合我需要的 jfiddle(编码器制作了一个列表，使其侧面与上面的一些文本对齐) 这是更新后的 jfiddle 链接: https

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页