因为比较简单,所以直接上代码:

 

  1 <!Doctype HTML>
  2 <html lang="en">
  3  <head>
  4      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5      <title>Tab选项卡效果1_常规版</title>
  6 
  7      <style type="text/css">
  8          *{
  9              margin: 0;
 10              padding: 0;
 11              list-style: none;
 12              font-size: 12px;
 13          }
 14          
 15          .notice{
 16              width: 298px;
 17              height: 98px;
 18              border: 1px solid #EEEEEE;
 19              overflow: hidden;
 20              /*----------------------------------*/
 21              margin: 50px auto auto 50px;
 22          }
 23 
 24          .notice-menu{
 25              height: 27px;
 26              background: #F7F7F7;
 27              /*----------------------------------*/
 28              position: relative;
 29          }
 30 
 31          .notice-menu ul{
 32              width: 301px;    /*这里是为了解决边界标题的边框与你容器边框的冲突*/
 33              /*----------------------------------*/
 34              position:absolute;
 35              left: -1px;
 36          }
 37 
 38          .notice-menu ul li{
 39              width: 58px;padding:0 1px;
 40              height: 26px;border-bottom: 1px solid #EEEEEE;line-height: 26px;text-align: center;
 41              overflow: hidden;
 42              background: #F7F7F7;
 43              /*----------------------------------*/
 44              float: left;
 45          }
 46 
 47          .notice-menu ul li.selected{
 48              background:#FFFFFF;
 49              font-weight:bolder;
 50              padding:0;
 51              border-bottom-color:#FFFFFF;
 52              border-left:1px solid #EEEEEE;
 53              border-right:1px solid #EEEEEE;
 54          }
 55 
 56          ul li a:link, ul li a:visited{
 57              text-decoration: none;
 58              color:#000000;
 59          }
 60 
 61          ul li a:hover{
 62              color:#FF9900;
 63          }
 64 
 65          .notice-main .mod{
 66              margin:10px 6px;
 67          }
 68 
 69          .notice-main .mod ul li{
 70              
 71              width:143px;
 72              line-height: 27px;
 73              overflow: hidden;
 74             /*----------------------------------*/
 75             float:left;
 76              
 77          }
 78 
 79      </style>
 80 
 81      <script type="text/javascript">
 82          function $(id){
 83              return typeof id === "string" ? document.getElementById(id) : id;
 84          }
 85 
 86          window.onload = function(){
 87              //获取鼠标滑过或点击以及要切换内容的元素
 88              var menus = $("notice-menu").getElementsByTagName("li");
 89              var mainDivs = $("notice-main").getElementsByTagName("div");
 90              if(menus.length != mainDivs.length){
 91                  return;
 92              }
 93              //遍历menus下的所有li
 94              for(var i=0;i<menus.length;i++){
 95                  menus[i].id = i;
 96                  menus[i].onmouseover = function(){
 97                      for(var j=0;j<menus.length;j++){
 98                          menus[j].className="";
 99                          mainDivs[j].style.display="none";
100                      }
101                      this.className = "selected";
102                      mainDivs[this.id].style.display="block";
103                  }
104              }
105          }
106      </script>
107 
108  </head>
109 
110  <body>
111      <hr/>
112      <div id="notice" class="notice">
113          <!--下面是标题层-->
114          <div id="notice-menu" class="notice-menu">
115              <ul>
116                  <li><a href="#">公告</a></li>
117                  <li><a href="#">规则</a></li>
118                  <li><a href="#">论坛</a></li>
119                  <li><a href="#">安全</a></li下面是内容层->
120                  <li class="selected"><a href="#">公益</a></li>
121              </ul>
122          </div>
123          <!--下面是内容层-->
124          <div id="notice-main" class="notice-main">
125              <div class="mod" style="display:none">
126                  <ul>
127                      <li><a href="#">张勇：要快乐玩足球</a><li>
128                      <li><a href="#">多行跟行阿里信用贷款</a><li>
129                      <li><a href="#">关于二战起源的分析</a><li>
130                      <li><a href="#">导师：论文怎么写才好</a><li>
131                  </ul>
132              </div>
133              <div class="mod" style="display:none">
134                  <ul><!--这个地方注意中括号的写法！对IE浏览器下的差异管用-->
135                      <li>
136                      <span>
137                          [
138                          <a href="#">通知</a>
139                          ]
140                      </span>
141                      <a href="#">五月分工资即</a><li>
142                      <li>
143                      <span>
144                          [
145                          <a href="#">通知</a>
146                          ]
147                      </span>
148                      <a href="#">员工保险说明</a><li>
149                      <li>
150                      <span>
151                          [
152                          <a href="#">通知</a>
153                          ]
154                      </span>
155                      <a href="#">关于养老保险</a><li>
156                      <li>
157                      <span>
158                          [
159                          <a href="#">通知</a>
160                          ]
161                      </span>
162                      <a href="#">员工年假调地</a><li>
163                  </ul>
164              </div>
165              <div class="mod" style="display:none">
166                  <ul>
167                      <li><a href="#">撒国抵抗大肆可可</a><li>
168                      <li><a href="#">国际观察家家家家</a><li>
169                      <li><a href="#">做饭增国沙拉不要</a><li>
170                      <li><a href="#">上海中厅开门国右</a><li>
171                  </ul>
172              </div>
173              <div class="mod" style="display:none">
174                  <ul>
175                      <li><a href="#">什么什么什么什么</a><li>
176                      <li><a href="#">好的好的好的好的</a><li>
177                      <li><a href="#">就是这样就是这样</a><li>
178                      <li><a href="#">我说什么来着的的</a><li>
179                  </ul>
180              </div>
181              <div class="mod">
182                  <ul>
183                      <li><a href="#">白白白白白白白白</a><li>
184                      <li><a href="#">日年困灯工国框架</a><li>
185                      <li><a href="#">土士大夫要顶戴在</a><li>
186                      <li><a href="#">同加紧国械地厅不</a><li>
187                  </ul>
188              </div>
189          </div>
190      </div>
191  <body>
192 </html>