Question

我有以下代码，对于我的生活，我无法弄清楚为什么它不起作用。任何帮助将不胜感激。感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Tabs with CSS &amp; jQuery</title>
<style type="text/css">
body {
margin:1em;
padding:0;
height:100%;
background-color:#cbcbcb;
color:#000000;  
text-align:center;
font-family:Arial, Helvetica, sans-serif;
border-style: thin;
}

h1 {font-size: 3em; margin: 20px 0;}
.hidden{
 background-color:gray;
 width:120px;
 text-decoration:none;
 font-size:x-large;
 color:black;
 display:none;
 border:thin;
 border-bottom-color:gray;
}

<script type="text/javascript">

$(document).ready(function() {
$("#button").click(function () {
$(".hidden").slideToggle(200);
});
<body>
<div class="hidden">woot</div>
<table style="width: 100%" cellspacing="1" class="style1">
 <tr>
  <td class="style1">Username</td>
  <td class="style1">Last Name</td>
  <td class="style1">First Name</td>
  <td class="style1">MI</td>
  <td class="style1">Address</td>
  <td class="style1">Email</td>
  <td class="style1">Age</td>
  <td class="style2"><p id="button"><a href="#">Toggle</a></p>&nbsp;</td>
 </tr>
</table>
</body>

Answer 1

你究竟是什么意思，不工作？这是您网页的完整代码吗？

如果是这样的话：

您的脚本代码未关闭
您的头标未关闭
你错过了结束}）;
您不包含jQuery脚本

Answer 2

您错过了结束});以及结束</script>和</style>代码。

$(document).ready(function() {
    $("#button").click(function () {
        $(".hidden").slideToggle(200);
    });
});

适当的缩进显示出很多。：O）

Answer 3

您错过了关闭}); javascript，请将其更新为：

$(document).ready(function() {
    $("#button").click(function () {
        $(".hidden").slideToggle(200);
    });
});

工作小提琴http://jsfiddle.net/rKYSB/

在桌子内滑动切换不起作用

3 个答案: