CSS与DIV制作标签(Tab)

<!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=gb2312" />
<title>CSS Tab</title>
<style type="text/css">
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
 
.pythonclub {width:545px; height:350px; overflow:hidden; margin:50px auto;  border-style: solid;}
.pythonclub_title
{
width:545px;
height:30px;
background:#fff;
background-image:url(http://www.52css.com/attachments/month_0709/585/btn_bg.png);
background-repeat: no-repeat;
overflow:hidden;
}
.pythonclub_title li {display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center;}
.pythonclub_title li a {display:block; width:90px; height:30px; line-height:34px; color:#f00;}
.pythonclub_title li a:hover {color:#f0f0f0; text-decoration:underline;}
.pythonclub_title_bg1 {background-position:0 0;}
.pythonclub_title_bg2 {background-position:0 -30px;}
.pythonclub_title_bg3 {background-position:0 -60px;}
.pythonclub_title_bg4 {background-position:0 -90px;}
.pythonclub_con {display:block; width:545px; height:300px; background:url(con_bg.png) no-repeat 0 0; overflow:hidden;}
.pythonclub_con ul {width:545px; height:300px; margin:12px auto;}
.pythonclub_con li {width:545px; line-height:30px; margin:0 auto; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}
.pythonclub_con li a {color:#03c;}
.pythonclub_con li a:hover {color:#069; text-decoration:underline;}
</style>
 
<script language="javascript">
	function pythonclubq(num){
	for(var id = 1;id<=4;id++)
	{
        var MrJin="pythonclub_con"+id;
        if(id==num)
            document.getElementById(MrJin).style.display="block";
        else
            document.getElementById(MrJin).style.display="none";
	}
	if(num==1)
        document.getElementById("pythonclubtitle").className="pythonclub_title pythonclub_title_bg1";
	if(num==2)
        document.getElementById("pythonclubtitle").className="pythonclub_title pythonclub_title_bg2";
	if(num==3)
        document.getElementById("pythonclubtitle").className="pythonclub_title pythonclub_title_bg3";
	if(num==4)
        document.getElementById("pythonclubtitle").className="pythonclub_title pythonclub_title_bg4";
	}
</script>
 
</head>
 
<body>
 
<div class="pythonclub">
	<ul class="pythonclub_title pythonclub_title_bg1" id="pythonclubtitle">
		<li><a href="javascript:void(0)" onclick="javascript:pythonclubq(1)">Min</a></li>
		<li><a href="javascript:void(0)" onclick="javascript:pythonclubq(2)">Daily</a></li>
		<li><a href="javascript:void(0)" onclick="javascript:pythonclubq(3)">Weekly</a></li>	
		<li><a href="javascript:void(0)" onclick="javascript:pythonclubq(4)">Monthly</a></li>
    </ul>
 
 
	<div class="pythonclub_con" id="pythonclub_con1" style="display:block;">
        <img src="http://image.sinajs.cn/newchart/min/n/sh601398.gif" alt="min chart" />
	</div>
 
	<div class="pythonclub_con" id="pythonclub_con2" style="display:none;">
        <img src="http://image.sinajs.cn/newchart/daily/n/sh601398.gif" alt="daily K chart" />
	</div>
 
	<div class="pythonclub_con" id="pythonclub_con3" style="display:none;">
        <img src="http://image.sinajs.cn/newchart/weekly/n/sh601398.gif" alt="weekly" />
	</div>
	<div class="pythonclub_con" id="pythonclub_con4" style="display:none;">
        <img src="http://image.sinajs.cn/newchart/monthly/n/sh601398.gif" alt="monthly" />
	</div>
</div>
 
</body>
</html>
Python 俱乐部

侧边栏

Python俱乐部

Python

小课题

京东优惠券

关于本站

链接

CSS与DIV制作标签(Tab)

Python 俱乐部

用户工具

站点工具

侧边栏

Python俱乐部

Python

小课题

京东优惠券

关于本站

链接

CSS与DIV制作标签(Tab)

页面工具
