无JavaScript实现内容切换效果

By Rainbow on 2010-09-16 // HTML / CSS , jQuery // 5342 Views+ // (4) Comments

选项卡式的内容切换效果，应用的场景比较多，用JavaScript是如何实现的不是我们今天说的重点。如果我们的”选项卡式的内容切换效果”在禁用JavaScript的情况下是否可以正常运行？是否可以满足用户的基本需求？是我们讨论的重点。
不过此情况放在中国的用户群体是不会有禁用JavaScript 的情况。但是我们不能放弃我们追求完美的精神。

演示一

The CSS Code :

    /**重置样式**/
    *{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 :

 
    <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 :

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);
	}
});