Version complète: jsB@nk » CSS » Web CSS Switcher contenu sans JavaScript
URL: https://www.javascriptbank.com/web-css-content-switcher-without-javascript.html
Sans JavaScript, nous pouvons encore changer de contenu Web avec CSS C'est tellement incroyable, mais c'est tellement vrai, il suffit de cliquer sur le code HTML par exemple libre, pour le tester par vous-m
Version complète: jsB@nk » CSS » Web CSS Switcher contenu sans JavaScript
URL: https://www.javascriptbank.com/web-css-content-switcher-without-javascript.html
<style type="text/css">* {margin: 0;padding: 0;}img {border: none;}h1 {line-height: 1em;font-family: "Times New Roman", Times, serif;color: #666;font-style: italic;text-align: center;padding: 30px 0 0 0;}h2 {font-family: Arial, Helvetica, sans-serif;margin: 0 0 8px 0;}h3 {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}p {font-family: Arial, Helvetica, sans-serif;font-size: 20px;line-height: 1.5em;margin: 0 0 14px 0;padding: 30px 0 0 0;clear: both;text-align: center;color: #666;}#content-slider {width: 650px;overflow: hidden;height: 300px;margin: 30px 0 0 0;border: solid 1px #666;}#content-slider-inside {list-style: none;height: 320px;overflow: scroll;overflow-y: hidden;}#content-slider-inside li {width: 650px;background: #ccc;height: 300px;color: #666;font-size: 200px;font-family: "Times New Roman", Times, serif;font-style: italic;text-align: center;line-height: 300px;}#navigation {list-style: none;margin: 20px 0 0 0;float: right;}#navigation li {float: left;width: 30px;height: 30px;text-align: center;margin: 0;border: solid 1px #ccc;line-height: 30px;font-family: Arial, Helvetica, sans-serif;margin: 0 0 0 5px;}#navigation li a, #navigation li a:link, #navigation li a:visited {text-decoration: none;display: block;height: 30px;color: #666;}#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {background: #666;color: #fff;}#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background: #666;color: #fff;}</style><div style="margin: 0pt auto; width: 650px;"><h1>A JavaScript Content Switcher That Works Without JavaScript</h1><div id="content-slider"><ul id="content-slider-inside"><li id="one">1</li><li id="two">2</li><li id="three">3</li><li id="four">4</li><li id="five">5</li></ul></div><ul id="navigation"><li><a href="#one">1</a></li><li><a href="#two">2</a></li><li><a href="#three">3</a></li><li><a href="#four">4</a></li><li><a href="#five">5</a></li></ul><p>This page has no JavaScript, but the content switcher above is fully functional, and even allows deep linking.</p><p>JavaScript can now be added as an enhancement to make the content slide, fade, or animate.</p><p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">View the same page with JavaScript/jQuery enhancing it.</a></p><p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">< Go back to the tutorial</a></p></div>