Phiên bản đầy đủ: jsB@nk » CSS » Ẩn / hiện nội dung không cần dùng JavaScript
URL: https://www.javascriptbank.com/web-css-content-switcher-without-javascript.html
Có bao giờ bạn thấy một trang web không dùng bất kì mã JavaScript nào nhưng vẫn thực hiện hiệu ứng ẩn/hiện nội dung sau khi nhấn chuột? Thật không thể tin được nhưng đó lại là sự thật, hãy kiểm tra hiệu ứng CSS này để xem tác giả đã làm điều đó như thế nào :).
Phiên bản đầy đủ: jsB@nk » CSS » Ẩn / hiện nội dung không cần dùng 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>