无JavaScript实现内容切换效果
选项卡式的内容切换效果,应用的场景比较多,用JavaScript是如何实现的不是我们今天说的重点。如果我们的”选项卡式的内容切换效果”在禁用JavaScript的情况下是否可以正常运行?是否可以满足用户的基本需求?是我们讨论的重点。
不过此情况放在中国的用户群体是不会有禁用JavaScript 的情况。但是我们不能放弃我们追求完美的精神。
The CSS Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /**重置样式**/ *{margin:0;padding:0;} body{font:12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;} ul, ol {list-style: none; } a {text-decoration: none; } a:hover {text-decoration:underline; } img {border:0;} /**内容样式**/ .section{width:350px; margin:0 auto; } #content-slider{border:1px solid #666;height:200px;width:350px; margin-top:50px;} #content-slider-inside{height:200px;overflow:hidden; } #content-slider-inside li{background-color:#ccc;height:200px;width:350px;text-align:center;font-size:100px;line-height:200px;color:#666;} #navigation {margin: 10px 0 0 0;float: right;} #navigation li {border:solid 1px #ccc; float:left;width:20px;height:20px;line-height:20px;text-align:center;margin-left:5px;} #navigation li a, #navigation li a:link, #navigation li a:visited {color: #666;display: block;height:20px;} #navigation li a:hover, #navigation li a:focus, #navigation li a:active {background:#666;color:#fff;} #navigation li.current a, #navigation li.current a:link, #navigation li.current a:visited {background:#666;color:#fff;} |
The HTML Code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="section"> <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> </div> |
通过以上源码,我们可以看出我们使用的是”锚点链接”的原理,来实现内容切换的,当我们点击这些链接的时候,会先去页面上寻找诸如的内容(例如:<a>的name属性),如果没有,就会寻找页面上id为此锚点的元素,马上就会定位到匹配锚点的元素的顶部。这样就可以根据”锚点链接”的原理,让容器里面的内容切换显示。
通过”锚点链接”原理我们已经实现了基本的切换效果。要想做更多扩展和完善当然得用JavaScirpt.
The jQuery JavaScript :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | var MooJS= MooJS || {}; MooJS.tabs = function(container, startIndex) { var root = container || '#tabs'; var speed = 500; startIndex = startIndex || 0; root = $(root); root.addClass('js-enabled'); //add click events $.each(root.find('ul li a'),function(index) { var that = $(this); if(index == startIndex) { that.parent().addClass('current'); } that.click(function(){ //set current class $(this).parent().addClass('current'); $.each($(this).parent().siblings(),function() { $(this).removeClass('current'); }); //show/hide panels $.each($(that.attr('href')).fadeIn(speed).siblings(),function(){ $(this).hide(); }); return false; }); }); //hide all but start index $.each(root.find('#content-slider-inside > *'),function(index, el) { if(index != startIndex) { $(this).hide(); } }); }; $(document).ready(function(){ var tabs = $('#demo'); if(tabs.length){ MooJS.tabs(tabs); } }); |
很好,很强大!学习了,谢谢
第一个不需要js的效果我怎么做都实现不了。 demo里面点了之后li就移动上去了,我的li就不动....
demo的演示在多个浏览器中测试过,没有你说的遇到的问题。如果demo页面要另存为,我建议你使用非IE核心的浏览器。
学习了,这里很不错 以后常来