div 隱藏顯示各類例子

時間  2019-12-05
標籤 div 隱藏 顯示 各類 例子 欄目 CSS 简体版
原文   原文鏈接

<html>
<head>
<title>jquery show()</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!--------------------------------------- show() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show()</div></p>
<p><input id="button1" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button2" type="button" value="隱藏div" /></p>
<div id="div1" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button1").click(function(){
$("#div1").show();
});

$("#button2").click(function(){
$("#div1").hide();
});
</script>javascript

<!--------------------------------------- show(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">show(500)</div></p>
<p><input id="button3" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button4" type="button" value="隱藏div" /></p>
<div id="div2" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button3").click(function(){
$("#div2").show(500);
});

$("#button4").click(function(){
$("#div2").hide(500);
});
</script>html


<!--------------------------------------- fadeIn() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn()</div></p>
<p><input id="button5" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button6" type="button" value="隱藏div" /></p>
<div id="div3" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button5").click(function(){
$("#div3").fadeIn();
});

$("#button6").click(function(){
$("#div3").fadeOut();
});
</script>java

<!--------------------------------------- fadeIn(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeIn(500)</div></p>
<p><input id="button7" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button8" type="button" value="隱藏div" /></p>
<div id="div4" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button7").click(function(){
$("#div4").fadeIn(500);
});

$("#button8").click(function(){
$("#div4").fadeOut(500);
});
</script>jquery

 

<!--------------------------------------- slideDown() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown()</div></p>
<p><input id="button9" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button10" type="button" value="隱藏div" /></p>
<div id="div5" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button9").click(function(){
$("#div5").slideDown();
});

$("#button10").click(function(){
$("#div5").slideUp();
});
</script>web

 

<!--------------------------------------- slideDown(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideDown(500)</div></p>
<p><input id="button11" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button12" type="button" value="隱藏div" /></p>
<div id="div6" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button11").click(function(){
$("#div6").slideDown(500);
});

$("#button12").click(function(){
$("#div6").slideUp(500);
});
</script>app


<!--------------------------------------- slideToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle()</div></p>
<p><input id="button13" type="button" value="顯示/隱藏div" /></p>
<div id="div7" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button13").click(function(){
$("#div7").slideToggle();
});
</script>ide


<!--------------------------------------- slideToggle(500) --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">slideToggle(500)</div></p>
<p><input id="button14" type="button" value="顯示/隱藏div" /></p>
<div id="div8" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button14").click(function(){
$("#div8").slideToggle(500);
});
</script>測試


<!--------------------------------------- fadeToggle() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeToggle()</div></p>
<p><input id="button15" type="button" value="顯示/隱藏div" /></p>
<div id="div9" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button15").click(function(){
$("#div9").fadeToggle();
});
</script>優化

<!--------------------------------------- fadeTo() --------------------------------------->
<p><div style="font-size:22px;font-weight:bold ;">fadeTo()</div></p>
<p><input id="button16" type="button" value="顯示div" />&nbsp;&nbsp;<input id="button17" type="button" value="隱藏div" /></p>
<div id="div10" style="display :none ;">
<font style="font-size:22px;margin-left:10px;">卡卡測速網 www.webkaka.com</font>
<ul>
<li><b>卡卡網是專業測速網站</b>，內容主要包括<b>網速測試</b>及<b>網站速度測試</b></li>
<li>卡卡網目前在全國60多個省市、美國、澳大利亞、日本、英國等近20個國家地區均設有網速測試點</li>
<li><b>卡卡網提供全球Ping測試</b>，分佈全國及全球各地100多個測試點，測試網站連通情況</li>
<li>卡卡網提供網站Tracert路由追蹤測試，分佈各地100多個測試點，能夠測試網站在各地訪問的所經路線</li>
<li>卡卡網提供DNS查詢功能，一鍵獲知網站在全球的解析狀況</li>
<li><b>卡卡網提供網站速度診斷服務</b>，智能分析網站近40項可優化項目，讓網站速度當即提高3倍不是夢</li>
</ul>
</div>
<script type="text/javascript">
$("#button16").click(function(){
$("#div10").fadeTo("slow",0.15);
});
$("#button17").click(function(){
$("#div10").fadeOut();
});
</script>網站

<p style="height:500px;width:100%"></p></body></html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程