在 HTML 代码中注入 CSS 和 JavaScript

Injecting CSS and JavaScript in HTML code

本文关键字：CSS JavaScript 注入 HTML 代码      更新时间：2023-09-26

我是网络编程的新手。所以我修改了我在网上找到的代码，最终得到这个：jsfiddle.net/y4Mdy/673 女巫工作正常，表中的所有标题行都显示出来，其他标题行被隐藏，然后可以通过单击标题来显示。

但是当我尝试将html，CSS和JavaScript组合在一起时（按照此处的说明），它似乎不起作用。当我单击标题时没有任何反应，其他行没有显示。这是我的html文件的内容：

<html>
    <head>
        <script type="text/javascript">
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

你想先加载jQuery，就像其他人说的那样，你可能还想把你的代码放在'ready'函数中，因为你在页面顶部运行代码。这样，您可以确保在代码运行之前加载整个页面。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
           $( document ).ready(function() {
            // Handler for .ready() called.
            $('.header').click(function () {
                $(this).find('span').text(function (_, value) {
                    return value == '-' ? '+' : '-'
                });
                $(this).nextUntil('tr.header').slideToggle(100, function () {});
            });
          });
         </script>.
        <style>
            table, tr, td, th {
                border-collapse:collapse;
            }
            tr {
                display: none;
            }
            table {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
            }
            tr.header {
                cursor:pointer;
                display: table-row;
            }
        </style>.
    </head>
    <body>
        <table>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr class="header">
                <th><span>+</span> Header</th>
            </tr>
            <tr>
                <td>date</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
    </body>
</html>

在此处查看信息：http://api.jquery.com/ready/

另外，请记住，在上面的例子中，你从互联网加载jQuery。您可能需要在本地下载它并从本地目录中加载它，具体取决于您的情况。不过，就您的目的而言，只要您有互联网连接，您就可以通过从互联网链接来做到这一点。

你在代码中使用了jQuery，但你忘了包含jquery文件！

在您的 html 中添加这个： 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

首先导入 jquery 库

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
相关文章：