Daco Note

Javascript toggle & CSS 範例1

觸發JS 常用的方式有

onMouseover
onMouseout
onClick
onfocus
				
					  <div class="trig" onMouseover="toggle();">onMouseover</div>
 <div class="trig"  onMouseout="toggle();">onMouseout</div>
 <div class="trig"  onClick="toggle();">onClick</div>
 <INPUT class="trig" VALUE="onfocus"  onfocus="toggle();"></INPUT>
 <div tabindex="0" class="trig" VALUE="onfocus"  onfocus="toggle();"></div>
				
			

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<style>.all{background-color:#eee;}
#p1{width:100px;height:200px;background-color:#fc0;display:inline-block;background-image:URL('https://daco.cloudaccess.host/wp-content/uploads/2021/10/timo-wielink-4Zk45jNyQS4-unsplash.jpg');background-repeat:no-repeat;background-size:cover;}
#p2{width:100px;height:200px;background-color:#c90;display:inline-block;transform:translateX(10px) rotateZ(15deg);transition:0.5s;}
#p2.active{transform:translateX(-50px) rotateZ(0deg);transition:0.5s;}
#p3{width:100px;height:200px;background-color:#cc9;display:inline-block;transform:translateX(10px) rotateZ(25deg);transition:0.5s;}
#p3.active{transform:translateX(-100px) rotateZ(0deg);transition:0.5s;}
#p4{width:100px;height:200px;background-color:#c99;display:inline-block;transform:translateX(10px) rotateZ(35deg);transition:0.5s;}
#p4.active{transform:translateX(-150px) rotateZ(0deg);transition:0.5s;}</style>
</head>
<body data-rsssl=1>
<div class="all" onMouseover="toggle();" onMouseout="toggle();">
<div id="p1"></div><div id="p2"></div><div id="p3"></div><div id="p4"></div></div><noscript id="wpfc-google-fonts"><link crossorigin="anonymous" rel='stylesheet' id='google-fonts-1-css' href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRokkitt%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=auto&#038;ver=6.3.1' media='all'/>
</noscript>
<script>document.addEventListener('DOMContentLoaded',function(){function wpfcgl(){var wgh=document.querySelector('noscript#wpfc-google-fonts').innerText, wgha=wgh.match(/<link[^\>]+>/gi);for(i=0;i<wgha.length;i++){var wrpr=document.createElement('div');wrpr.innerHTML=wgha[i];document.body.appendChild(wrpr.firstChild);}}wpfcgl();});</script>
<script id='hu-front-scripts-js-extra'>var HUParams={"_disabled":[],"SmoothScroll":{"Enabled":false,"Options":{"touchpadSupport":false}},"centerAllImg":"1","timerOnScrollAllBrowsers":"1","extLinksStyle":"","extLinksTargetExt":"","extLinksSkipSelectors":{"classes":["btn","button"],"ids":[]},"imgSmartLoadEnabled":"","imgSmartLoadOpts":{"parentSelectors":[".container .content",".post-row",".container .sidebar","#footer","#header-widgets"],"opts":{"excludeImg":[".tc-holder-img"],"fadeIn_options":100,"threshold":0}},"goldenRatio":"1.618","gridGoldenRatioLimit":"350","sbStickyUserSettings":{"desktop":false,"mobile":false},"sidebarOneWidth":"340","sidebarTwoWidth":"260","isWPMobile":"","menuStickyUserSettings":{"desktop":"stick_up","mobile":"stick_up"},"mobileSubmenuExpandOnClick":"1","submenuTogglerIcon":"<i class=\"fas fa-angle-down\"><\/i>","isDevMode":"","ajaxUrl":"https:\/\/www.daconote.com\/?huajax=1","frontNonce":{"id":"HuFrontNonce","handle":"a7fe6c53d8"},"isWelcomeNoteOn":"","welcomeContent":"","i18n":{"collapsibleExpand":"Expand","collapsibleCollapse":"Collapse"},"deferFontAwesome":"","fontAwesomeUrl":"https:\/\/www.daconote.com\/wp-content\/themes\/hueman\/assets\/front\/css\/font-awesome.min.css?3.7.23","mainScriptUrl":"https:\/\/www.daconote.com\/wp-content\/themes\/hueman\/assets\/front\/js\/scripts.min.js?3.7.23","flexSliderNeeded":"","flexSliderOptions":{"is_rtl":false,"has_touch_support":true,"is_slideshow":true,"slideshow_speed":5000}};</script>
<script id='happy-elementor-addons-js-extra'>var HappyLocalize={"ajax_url":"https:\/\/www.daconote.com\/wp-admin\/admin-ajax.php","nonce":"11350cc4d5","pdf_js_lib":"https:\/\/www.daconote.com\/wp-content\/plugins\/happy-elementor-addons\/assets\/vendor\/pdfjs\/lib"};</script>
<script id='jetpack-lazy-images-js-extra'>var jetpackLazyImagesL10n={"loading_warning":"\u7cfb\u7d71\u4ecd\u5728\u8f09\u5165\u5716\u7247\u3002 \u8acb\u53d6\u6d88\u5217\u5370\uff0c\u7136\u5f8c\u518d\u8a66\u4e00\u6b21\u3002"};</script>
<script id="elementor-pro-frontend-js-before">var ElementorProFrontendConfig={"ajaxurl":"https:\/\/www.daconote.com\/wp-admin\/admin-ajax.php","nonce":"cef1c97686","urls":{"assets":"https:\/\/www.daconote.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/www.daconote.com\/wp-json\/"},"i18n":{"toc_no_headings_found":"No headings were found on this page."},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"}},"facebook_sdk":{"lang":"zh_TW","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/www.daconote.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};</script>
<script id="elementor-frontend-js-before">var elementorFrontendConfig={"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"\u5206\u4eab\u5230 Facebook","shareOnTwitter":"\u5206\u4eab\u5230 Twitter","pinIt":"\u91d8\u4e0a","download":"Download","downloadImage":"\u4e0b\u8f09\u5716\u7247","fullscreen":"\u5168\u87a2\u5e55","zoom":"\u653e\u5927","share":"\u5206\u4eab","playVideo":"\u64ad\u653e\u5f71\u97f3","previous":"\u4e0a\u4e00\u5f35","next":"\u4e0b\u4e00\u5f35","close":"\u95dc\u9589","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"\u884c\u52d5\u88dd\u7f6e","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.15.3","is_static":false,"experimentalFeatures":{"e_dom_optimization":true,"e_optimized_assets_loading":true,"additional_custom_breakpoints":true,"theme_builder_v2":true,"landing-pages":true,"form-submissions":true},"urls":{"assets":"https:\/\/www.daconote.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper-container","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":6111,"title":"Javascript%20toggle%20%26%20CSS%20%E7%AF%84%E4%BE%8B1%20-%20Daco%20Note","excerpt":"","featuredImage":false}};</script>
<script >window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', "UA-143177605-1", 'auto');
ga('require', 'outboundLinkTracker');
ga('send', 'pageview');</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="//www.daconote.com/wp-content/cache/wpfc-minified/8x5sssj0/g4tzo.js"></script>
<script>document.documentElement.className=document.documentElement.className.replace("no-js","js");</script>
<script src='https://c0.wp.com/c/6.3.1/wp-includes/js/jquery/jquery.min.js' id='jquery-core-js'></script>
<script src='https://c0.wp.com/c/6.3.1/wp-includes/js/jquery/jquery-migrate.min.js' id='jquery-migrate-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/kkyy6fl2/g4tzo.js' id='font-awesome-4-shim-js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js?ver=6.3.1' id='jquery-easing-js'></script>
<!--[if lt IE 9]><script src="//www.daconote.com/wp-content/cache/wpfc-minified/2oi92wgk/h5bae.js"></script><![endif]-->
<!--[if lt IE 9]><script src="//www.daconote.com/wp-content/cache/wpfc-minified/q50lq8fo/h5bae.js"></script><![endif]-->
<script>document.documentElement.classList.add('jetpack-lazy-images-js-enabled'
);</script>
<script>function toggle(){
document.getElementById("p2").classList.toggle("active");
document.getElementById("p3").classList.toggle("active");
document.getElementById("p4").classList.toggle("active");
}</script>
<script>function toggle(){
document.getElementById("p2").classList.toggle("active");
document.getElementById("p3").classList.toggle("active");
document.getElementById("p4").classList.toggle("active");
}</script>
<script src='https://c0.wp.com/c/6.3.1/wp-includes/js/underscore.min.js' id='underscore-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/maqwe5jx/h5bae.js' id='hu-front-scripts-js' defer></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/4cnf31y/h5bae.js' id='happy-elementor-addons-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/f2ea49a5/h5bae.js' id='jetpack-lazy-images-polyfill-intersectionobserver-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/8htcend4/h5bae.js' id='jetpack-lazy-images-js'></script>
<script defer src='https://stats.wp.com/e-202337.js' id='jetpack-stats-js'></script>
<script id="jetpack-stats-js-after">_stq=window._stq||[];
_stq.push([ "view", {v:'ext',blog:'164199075',post:'6111',tz:'8',srv:'www.daconote.com',j:'1:12.5'} ]);
_stq.push([ "clickTrackerInit", "164199075", "6111" ]);</script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/6ojhutg9/h5bae.js' id='smartmenus-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js?ver=1.23.0' id='prismjs_core-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js?ver=1.23.0' id='prismjs_loader-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js?ver=1.23.0' id='prismjs_normalize-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js?ver=1.23.0' id='prismjs_line_numbers-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js?ver=1.23.0' id='prismjs_toolbar-js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.23.0' id='prismjs_copy_to_clipboard-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/7kwmoois/h5bae.js' id='elementor-pro-webpack-runtime-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/ferz0t93/h5bae.js' id='elementor-webpack-runtime-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/21i6no1k/h5bae.js' id='elementor-frontend-modules-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/7jp2pwmy/h5bae.js' id='elementor-pro-frontend-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/kz0zs3lv/h5bae.js' id='elementor-waypoints-js'></script>
<script src='https://c0.wp.com/c/6.3.1/wp-includes/js/jquery/ui/core.min.js' id='jquery-ui-core-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/1dhh91xw/h5bae.js' id='elementor-frontend-js'></script>
<script src='//www.daconote.com/wp-content/cache/wpfc-minified/mjh932jw/h5bae.js' id='pro-elements-handlers-js'></script>
<!--[if lt IE 9]><script src="//www.daconote.com/wp-content/cache/wpfc-minified/7viwlj2p/h5bae.js"></script><![endif]-->
<script>jQuery.noConflict();
(
function($){
$(function (){
$("area[href*=\\#],a[href*=\\#]:not([href=\\#]):not([href^='\\#tab']):not([href^='\\#quicktab']):not([href^='\\#pane'])").click(function (){
if(location.pathname.replace(/^\//, '')==this.pathname.replace(/^\//, '')&&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length ? target:$('[name=' + this.hash.slice(1) + ']');
if(target.length){
$('html,body').animate({
scrollTop: target.offset().top - 20											},900 , 'easeInQuint');
return false;
}}
});
});
}
)(jQuery);</script>
<script>window._wpemojiSettings={"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/14.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.daconote.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.3.1"}};
!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83e\udef1\ud83c\udffb\u200d\ud83e\udef2\ud83c\udfff","\ud83e\udef1\ud83c\udffb\u200b\ud83e\udef2\ud83c\udfff")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);</script>
</body>
</html>