tab菜单最实用的例子

最新推荐文章于 2024-05-11 00:13:58 发布

iteye_6233

最新推荐文章于 2024-05-11 00:13:58 发布

阅读量107

点赞数

文章标签： java javascript ViewUI

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
	#tab{
		width:100%;
		height:200px;
		}
	#tabTitle{
		width:100%;
		height:25px;
		line-height:25px;
		}
		#tabTitle .tabTitleCurrent{
			border:2px solid #888;
			background:#888;
		}
		#tabTitle h3{
		margin:0;
		padding:0;
		width:80px;
		background:#ccc;
		float:left;
		line-height:25px;
		text-align:center;
		border:2px solid white;
		font-size:12px;
		color:white;
		}
	#tabContent{
		width:100%;
		height:175px;
		background:#888;
		color:white;
	}
	#tabContent div{
		display:none;
	}
	#tabContent .tabContentCurrent{
		display:block;
	}
	#tabContent .tabContentCurrent ul{
		margin-top:2px;
		padding:5px;
		list-style:none;
	}
</style>
<script type="text/javascript">
	function tabShow(num){
		var h3os=document.getElementsByTagName("h3");
		var cdivs=document.getElementById("tabContent").getElementsByTagName("div");
		for(i=0;i<h3os.length;i++){
			if(i==num){
				h3os[i].className="tabTitleCurrent";
				cdivs[i].className="tabContentCurrent";
				}
			else{
				h3os[i].className="";
				cdivs[i].className="";
				}
			}
		}
</script>
</head>
<body>
<div id="tab">
	<div id="tabTitle">
    	<h3 class="tabTitleCurrent" onMouseOver="tabShow('0');">第一项</h3>
        <h3 onMouseOver="tabShow('1');">第二项</h3>
        <h3 onMouseOver="tabShow('2');">第三项</h3>
    </div>
    <div id="tabContent">
    	<div class="tabContentCurrent">
        	<ul>
            	<li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
                <li>aaaaa</li>
            </ul>
        </div>
        <div>
        	<ul>
            	<li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
                <li>bbbbb</li>
            </ul>
        </div>
                <div>
        	<ul>
            	<li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
                <li>ccccccc</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>