jquery切換淡入/淡出

我已閱讀本網站上的所有與Jquery切換的答案，但我沒有看到我的解決方案。欣賞某人對此的看法。我們需要的全部功能是在選擇#pulldown_tab時按需顯示副本。儘管在w3 jquery站點和側面測試中非常努力，但我失去了什麼是錯誤的。jquery切換淡入/淡出

<html> 
<head> 
<script> 
$(document).ready(function(){ 
$("section_content_wrapper""pulldown_tab").click(function(){ 
$("section_content_wrapper" "cream_of_the_craft").slideToggle("slow"); 
    }); 
}); 
</script> 


<div id="main"><!-- Start Main Area --> 
<div class="navigation_container"><!-- navigation --> 
<ul class="menu"> 
     <li><a href="#">About</a></li>   
     <li><a href="#">Articles</a></li> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
</ul> 
</div><!-- END navigation --> 

<div class="pppd_logo"> 
</div><!-- END logo --> 

<div class="section_content_wrapper"><!-- Start Section 1 Cream_of_the_Craft --> 
<h1>This is the Headline</h1> 
    <div id="pulldown_tab"></div> 
    <div id="cream_of_the_craft"> <!--section content--> 
    This is the copy to revealed.</div><!--section content--> 
     </div><!-- END Section 1 Cream_of_the_Craft --> 
</div><!-- End Main Area --> 


.section_content_wrapper 
{ 
position:  absolute; 
width:   46%; 
height:   200px; 
margin-top:  15%; 
margin-right: auto; 
margin-left: 39%; 
z-index:  0; 
} 

h1 
{ 
position: relative; 
margin-bottom: .8em; 
font-family: 'EB Garamond', serif; 
font-weight: 400; 
font-size: 2em; 
padding-left: 0.1em; 
padding-right: 0.1em; 
padding-bottom: 0; 
color: black; 
text-align: center; 
border-bottom-style:solid; 
border-width: 1px; 
border-color: black; 
z-index: 0; 
} 

#cream_of_the_craft 
{ 
position:  absolute; 
margin-top:  -25px; 
padding-top: 4em; 
padding-left: 1em; 
padding-right: 1em; 
padding-bottom: 1em; 
font-family: 'Istok Web', sans-serif; 
font-size:  1em; 
color:   black; 
background-color: #FFFFFF; 
opacity: .5; 
z-index: 0; 
display: none; 
} 


#pulldown_tab 
{ 
position:  absolute; 
height:48px; 
width: 34px; 
background:  url('pulldown.png'); 
margin-top:  -25px; 
margin-right: auto; 
margin-left: 17em; 
z-index:  2; 
}

來源

2013-06-03 user2446543

完全不相關，但是如果您想給div設置「section_ *」標識符，爲什麼不使用HTML5的

？ –

您正在使用jQuery選擇了錯誤的方式，這裏是應該的。

$(document).ready(function(){ 
    $(".section_content_wrapper > #pulldown_tab").click(function(){ 
    $(".section_content_wrapper > #cream_of_the_craft").slideToggle("slow"); 
    }); 
});

我建議你閱讀介紹jQuery的：http://learn.jquery.com/

來源

2013-06-03 05:06:21 Antoine

你錯過了一個點。 '$（「section_content_wrapper' – PSL

對，謝謝！ – Antoine

+1對於jQuery官方文檔 –

你的選擇是錯誤的。他們應該是：

$(document).ready(function(){ 
    $(".section_content_wrapper #pulldown_tab").click(function(){ 
     $(".section_content_wrapper #cream_of_the_craft").slideToggle("slow"); 
    }); 
}); 

// .something equals class="something" 
// #something equals id="something"

其他冷卻器選擇也可here

來源

2013-06-03 05:07:55 JRomero

爲什麼w3schools在官方文檔可用時？ – PSL

這是第一個出現在谷歌上，一眼就看到提供了一個非常漂亮的選擇器語法表。TBH，jQuery的主要文檔實際上並不是最友好的。將原始文章中的表格與文檔中的表格進行比較：http://api.jquery.com/category/selectors/ – JRomero

jQuery選擇標籤是不正確的......

$(document).ready(function() { 
$("div.section_content_wrapper , div#pulldown_tab").click(function() { 
    $("div.section_content_wrapper , div#cream_of_the_craft").slideToggle("slow"); 
});

}）;

在jquery

來源

2013-06-03 05:09:27

使用多選擇幾件事情。

的#pulldown_tab不包含任何內容，所以你有什麼可點擊。
你的選擇器壞了。由於pulldown_tab和cream_of_the_craft都有id，所以你可以分別直接參考它們$("#pulldown_tab")和$(#cream_of_the_craft)。

請參見下面的jsfiddle爲你想要什麼工作的例子：http://jsfiddle.net/aB5Dy/

來源

2013-06-03 05:15:53 Recurse

我測試了這一點，它的工作。代碼片段如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script> 

    $(document).ready(function(){ 
     $(".section_content_wrapper,#pulldown_tab").click(function(){ 
     $(".section_content_wrapper,#cream_of_the_craft").fadeToggle("slow"); 
      }); 
    }); 
    </script>

在選擇器之間使用逗號並使用fadetoggle（）。

來源

2013-06-03 05:26:37 Zohaib

jquery切換淡入/淡出

回答

相關問題