HTML与CSS布局实例-优快云博客

本文链接：https://blog.youkuaiyun.com/princegang/article/details/83762775

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.slip{display:none}
.active{display:block}
.topItem{float:left; background:url(./images/jrw1_04.gif) no-repeat; width:77px; height:22px;line-height:22px;color:#2f82fb}
.top{height:21px; background-color:#ebf5fa; border:solid 1px #c3e1f0; border-bottom-width:0; padding-left:15px; padding-top:2px}
.top .active{background-image:url(./images/jrw1_03.gif);color:red}
</style>
</head>

<body>

<div style="width:512px; height:400px; font-size:12px;">
    <div style="border:1px solid #9cb9e7; text-align:center; padding-bottom:2px;">
    	<div style="width:507px; padding-top:2px;">
        	<div class="top">
            	<div class="topItem active" onmouseover="showNext(0)">资讯</div>
                <div class="topItem" onmouseover="showNext(1)">游戏</div>
                <div class="topItem"  onmouseover="showNext(2)">购物</div>
                <div style="clear:both"></div>
            </div>
            <div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;"  class="slip active">
           	     the first 资讯
                <div style="clear:both"></div>
            </div>
			<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;"  class="slip">
           	    中间
                <div style="clear:both"></div>
            </div>
			<div style="border-left:solid 1px #aaddff; border-right:solid 1px #aaddff; border-bottom:solid 1px #aaddff; padding-top:10px;"  class="slip">
           	  最后
                <div style="clear:both"></div>
            </div>
        </div>
    </div>

    <div style="clear:both"></div>
</div>
<script type="text/javascript">
	function showNext(index){
		var slips=getElementsByClassName('slip');
		var topItem=getElementsByClassName('topItem');
		activeItem(topItem,index);
		activeItem(slips,index);
	}
	function activeItem(elementArray,index){
	    if(elementArray[index].className.indexOf("active")==-1){
			elementArray[index].className+=" active";
		}
		for(var i=0;i<elementArray.length;i++){
			if(i!=index){
			    removeClassName(elementArray[i],'active')
			}
		}
	}
	function removeClassName(element,classname){
		var theClassName;
		do{
			theClassName=element.className;
			element.className=theClassName.replace(classname, " ")

		}while(theClassName.indexOf(classname)>=0);
	}
	function getElementsByClassName(className, parentElement){
		var elems = (parentElement||document.body).getElementsByTagName("*");
		var result=[];
		for (i=0; j=elems[i]; i++){
			if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
				result.push(j);
			}
		}
		return result;
	} 
</script>


</body>
</html>
简单的 tab 切换
