gpt4 book ai didi

javascript - 在 HTML 代码中注入(inject) CSS 和 JavaScript

转载 作者:太空宇宙 更新时间:2023-11-03 23:40:50 26 4
gpt4 key购买 nike

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

但是当我尝试将 html、CSS 和 JavaScript 组合在一起时(按照找到的说明 here )它似乎不起作用。当我点击标题时没有任何反应,其他行没有显示。这是我的 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,就像其他人所说的那样,您可能还想将代码放在“就绪”函数中,因为您正在页面顶部运行代码。这样,您可以确保在代码运行之前加载整个页面。

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

此外,请记住,在上面的示例中,您是从 Internet 加载 jQuery。根据您的情况,您可能希望将其下载到本地并从本地目录中加载它。不过,出于您的目的,只要您有互联网连接,您就可以通过互联网链接进行操作。

关于javascript - 在 HTML 代码中注入(inject) CSS 和 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22938889/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com