在ASPX页面上使用多个JavaScript脚本

我试图在我的网站上使用多个JavaScript文件。 下面的第一段代码运行良好

 <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

然后，我添加以下脚本：

  <!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

上面的第一个块仍能按预期工作，但第二个块不能。调试时，我删除了第一个块，然后第二个块按预期工作

下面是需要第一个块的代码：

 <table>
                                <tr>
                                    <td colspan="2"></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <asp:DataList ID="dlImages" runat="server" RepeatColumns="3" CellPadding="5">
                                            <ItemTemplate>
                                                <a id="imageLink" href='<%# Eval("ImageName","~/SlideImages/{0}") %>' title='<%#Eval("Description") %>' rel="lightbox[Brussels]" runat="server">
                                                    <asp:Image ID="Image1" ImageUrl='<%# Bind("ImageName", "~/SlideImages/{0}") %>' runat="server" Width="112" Height="84" />
                                                </a>
                                            </ItemTemplate>
                                            <ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
                                                VerticalAlign="Bottom" />
                                        </asp:DataList>
                                    </td>
                                </tr>
                            </table>

这是需要第二个块的代码：

关于HTML的第二块，当您单击无序列表项时，相关段落将出现：

它确实会出现，但由于某些原因，上一个选项卡被删除：

---

为了避免对JS文件进行不必要的调用，请使用jQuery加载脚本创建我的主要JS文件：

---

我用它在需要时调用插件。

您检查控制台是否有错误吗？我猜图书馆在互相干扰。另外，您确定要加载所有这些库吗？@Rorymcrossan您好，控制台中没有出现错误。此外，我还发布了需要不同库的代码。我对每个脚本进行了注释，以查看是否需要它们中的任何一个来提供我所需的功能，但不幸的是，它们似乎都是必需的它们目前可能都是必需的，但是加载依赖于它们的3个独立框架和2个库是非常困难的。如果可能的话，我强烈建议您重构代码，只使用一个框架。不需要初始化吗？有时需要调用一些方法来初始化某些库。如果控制台窗口中没有错误，请尝试阅读库的文档。是否确实需要prototype.js和scriptaculous.js？scriptaculous.js自2010年以来一直没有更新过；自2015年以来的原型。第一块只显示了lightbox.js的需要，它是一个独立的库。此外，您还可以查看库的加载顺序；尝试加载jQuery，然后加载引导，然后加载lightbox。

            <ul id="myTab" class="nav nav-tabs nav-justified">
                <li class="active"><a href="#service-one" data-toggle="tab"><i class="fa fa-tree"></i> Group One</a>
                </li>
                <li class=""><a href="#service-two" data-toggle="tab"><i class="fa fa-car"></i> Group Two</a>
                </li>
                <li class=""><a href="#service-three" data-toggle="tab"><i class="fa fa-support"></i> Group Three Three</a>
                </li>
                <li class=""><a href="#service-four" data-toggle="tab"><i class="fa fa-database"></i> Group Four</a>
                </li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="service-one">
                    <h4>Group One</h4>
                    <p>Paragraph 1 of group one</p>
                    <p>Paragraph 2 of group one</p>
                </div>
                <div class="tab-pane fade" id="service-two">
                    <h4>Group Two</h4>
                    <p>Paragraph 1 of group two</p>
                    <p>Paragraph 2 of group two</p>
                </div>
                <div class="tab-pane fade" id="service-three">
                    <h4>Group Three</h4>
                    <p>Paragraph 1 of group three</p>
                    <p>Paragraph 2 of group three</p>
                </div>
                <div class="tab-pane fade" id="service-four">
                    <h4>Group Four</h4>
                   <p>Paragraph 1 of group four</p>
                    <p>Paragraph 2 of group four</p>
                </div>
            </div>

        </div>