tab标签页切换

第一种：

<div>
	<ul id="tab-title">
		<li class="current">温度报表</li>
		<li>湿度报表</li>
	</ul>
	<div id="tab-cont">
 		<div style="display:block;">first</div>
 		<div>second</div>
 	</div>
</div>

<script>
	$('#tab-title li').click(function(){
		$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
	})
</script>

第二种：

  * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
  }
  .notice {
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid #7c7c7c;
    overflow: hidden;
  }
  .notice-tit {
    height: 27px;
    background-color: #eaeaea;
    position: relative;
  }
  .notice-tit ul {
    position: absolute;
    width: 300px;
    left: -1px;
  }
  .notice-tit ul li {
    float: left;
    width: 58px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-bottom: 1px solid #7c7c7c;
    padding: 0 1px;
  }
  .notice-tit ul a {
    text-decoration: none;
    display: block;
  }
  .notice-tit ul .select {
    background-color: white;
    border-right: 1px solid #7c7c7c;
    border-left: 1px solid #7c7c7c;
    border-bottom: 1px solid white;
    padding: 0;
  }

<div class="notice">
	<div class="notice-tit" id="notice-tit">
       <ul>
         <li class="select"><a href="#">公告</a></li>
         <li><a href="#">规则</a></li>
         <li><a href="#">论坛</a></li>
         <li><a href="#">安全</a></li>
         <li><a href="#">公益</a></li>
       </ul>
 	</div>
   	<div class="notice-con" id="notice-con">
       	<div style="display: block">我是内容1</div>
       	<div style="display: none">我是内容2</div>
       	<div style="display: none">我是内容3</div>
       	<div style="display: none">我是内容4</div>
       	<div style="display: none">我是内容5</div>
  	</div>
</div>

<script>
 	//获取id封装成一个函数$()方便调用
 	function $(id) {
     	//如果传入的参数类型为字符串则获取当前ID元素，否则返回id
        return typeof id === "string" ? document.getElementById(id) : id;
	}
	//window.onload表示当文档加载完毕时执行函数
	window.onload = function() {
		//获取#notice-tit下面的全部li元素
        var titles = $("notice-tit").getElementsByTagName("li");
        //获取#notice-con下面的全部div元素
        var divs = $("notice-con").getElementsByTagName("div");

        //遍历所有li标签，给每个li加上id和值，并且绑定事件
        for (var i = 0; i < titles.length; i++) {
        	//给每个li加上id和值
          	titles[i].id = i;
          	//给每个li绑定事件
          	titles[i].onmouseover = function() {
            	//悬浮后首先应该初始化每个li和div上的类和display
            	for (var j = 0; j < titles.length; j++) {
              		titles[j].className = "";
              		divs[j].style.display = "none";
           	 	}
            	//给当前悬浮元素添加属性
            	titles[this.id].className = "select";
            	divs[this.id].style.display = "block";
          	};
        }
	};
</script>