Question

我正在尝试在我的网站上使用多个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>

上面的第一个块仍然按预期工作，但第二个块没有。在调试时，我删除了第一个块，＆amp;然后第二个块按预期工作。

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

 <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>

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

            <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>

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

确实会显示，但由于某种原因删除了上一个标签：

Answer 1

为了避免不必要的JS文件调用，我的主JS文件使用jQuery加载脚本：https://api.jquery.com/jquery.getscript/

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

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

1 个答案: