Full version: jsB@nk » CSS » Web CSS Content Switcher Without JavaScript
URL: https://www.javascriptbank.com/web-css-content-switcher-without-javascript.html
Without JavaScript, we can still switch web content with CSS. It's so incredible but it's so true, just click into this free HTML example code, for testing it by yourself, to find how to make CSS content switch on your own web page. This switch content script is really super easy and use.
Full version: jsB@nk » CSS » Web CSS Content Switcher Without 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>