我有两个链接,我想一次显示/隐藏它们,我的代码是:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// we will add our javascript code here
$(document).ready(function() {
$(function(){
$('#link').click(function(){
$('#colorDiv').slideToggle('slow');
return false;
});
});
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
#dv {
width:100px;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<table cellspacing="2">
<tr><td><a href="#" id="link">Color</a></td><td><a href="#" id="link">Car</a></td></tr>
<tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr>
</table>
</body>
</html>
默认情况下,我应该显示第一个div.汉克斯.
这是带有注释的代码。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style>
#carDiv {
display: none; /* set initial carDiv visibility to hide */
}
</style>
<style>
#dv {
width:100px;
height:100px;
border:1px solid;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(){
$('#colorDiv').slideToggle('slow');
return false;
});
$('#link2').click(function(){
$('#carDiv').slideToggle('slow');
return false;
});
})
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table cellspacing="2">
<tr><td><a href="#" id="link1" class="link">Color</a></td><td><a href="#" id="link2" class="link">Car</a></td></tr>
<tr><td><div id="colorDiv">Red</div></td><td><div id="carDiv">PRADO</div></td></tr>
</table>
</body>
</html>
评论：
首先- id 应该是唯一标识符，所以我将 ids 更改为 link1 和 link2。
第二不需要包含 2 个 jquery 库 - 使用其中之一 - 本地 (src="js/jquery.min.js") 或来自 Google 的一个 (src="http://ajax.googleapis.com/ajax/libs /jquery/1/jquery.min.js")
第三，如果您想使用多个选择器，就像您使用多个 id“link”那样，请使用类选择器而不是 id。然后在 Jquery 中使用 $('.link').click... 选择它。 Google jquery 选择器