当点击div时,我想要显示不同的div.
因此,当“#music”被点击时,我想要显示“#musicinfo”.
这是css：
- #music {
- float:left;
- height:25px;
- margin-left:25px;
- margin-top:25px;
- margin-right:80px;
- font-family: "p22-underground",sans-serif;
- font-style: normal;
- font-weight: 500;
- font-size:13pt;
- }
- #musicinfo {
- width:380px;
- margin:25px;
- font-family: "p22-underground",sans-serif;
- font-style: normal;
- font-weight: 500;
- font-size:13pt;
- line-height:1.1;
- display:none;
- }
和jquery：
- <script type="text/javascript">
- $("#music").click(function () {
- $("#musicinfo").show("slow");
- });
- </script>
任何帮助将是伟大的:)
解决方法
您遇到的问题是事件处理程序在元素存在于DOM中之前被绑定,如果将jQuery包含在$(document).ready()中,那么它应该工作得很好：
- $(document).ready(
- function(){
- $("#music").click(function () {
- $("#musicinfo").show("slow");
- });
- });
另一种方法是放置< script>< / script>在页面的脚下,所以在DOM被加载并准备好之后就遇到了.
为了使div隐藏起来,一旦点击了#music元素,只需使用toggle()：
- $(document).ready(
- function(){
- $("#music").click(function () {
- $("#musicinfo").toggle();
- });
- });
而为了褪色：
- $(document).ready(
- function(){
- $("#music").click(function () {
- $("#musicinfo").fadeToggle();
- });
- });
