网页面html简单实现tab鼠标经过切换栏目文章

在做网站时往往需要添加做一些栏目文章切换，可对cms，如phpcms等可以使用标签列出文章来，

首先栏目鼠标经过onMouseOver="return swap_tab(1)"  class="bt1" 多个需要增加改数字1

更多 id="j1"  多个需要增加改数字j1

内容 id="n1" 多个需要增加改数字n1

下面是效果图，可以自己修改修改

html:

<tr>
    <td><table width="387" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#e4e4e4;">
          <tr class="tab">
            <td height="30" width="100" align="center" style="color:#888585;" class="btl" id="p1" onMouseOver="return swap_tab(1)"><span>栏目1</span></td>
            <td height="30" width="100" align="center" style="color:#888585;" class="bt2" id="p2" onMouseOver="return swap_tab(2)"><span>栏目2</span></td>
            <td height="30" width="100" align="center" style="color:#888585;" class="bt3" id="p3" onMouseOver="return swap_tab(3)"><span>栏目3</span></td>
              <td height="30" width="100" align="right">
              <p id="j1" style="display: block;"><a target="_blank" href="#">1更多+</a></p>
              <p id="j2" style="display: none;"><a target="_blank" href="#">2更多+</a></p>
              <p id="j3" style="display: none;"><a target="_blank" href="#">3更多+</a></p>
              </td>
            </tr>    
        </table>
        <table cellspacing=0 cellpadding=0 width="387" border=0 align="center">
              <tr id="n1" style="display: block;">
                <td>
                <table width="387" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
    <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                 <tr class="dian">
                    <td width="20" height="24" align="center" style="color:#b91023" >></td>
                    <td align="left">
                <a href="#" target="_blank" title="#" class="lbt">1标题1标题1标题1标题</a>
                </td>
                <td align="right">1970-01-01</td>     
                  </tr>
                </table></td>
                </tr></table></td>
              </tr>
               <tr id="n2" style="display: none;">
                <td>
                <table width="387" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
    <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr class="dian">
                    <td width="20" height="24" align="center" style="color:#b91023" >></td>
                    <td align="left">
                <a href="#" target="_blank" title="#" class="lbt">2标题2标题2标题2标题</a>
                </td>
                <td align="right">1970-01-01</td>     
                  </tr>
                </table></td>
                </tr></table></td>
              </tr>
              <tr id="n3" style="display: none;">
                <td>
                <table width="387" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
    <td style="line-height:30px;" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr class="dian">
                    <td width="20" height="24" align="center" style="color:#b91023" >></td>
                    <td align="left">
                <a href="#" target="_blank" title="#" class="lbt">3标题3标题3标题3标题</a>
                </td>
                <td align="right">1970-01-01</td>     
                  </tr>
                </table></td>
                </tr></table></td>
              </tr>
          </table>
        </td>
  </tr>

js:

 function swap_tab(n) { //鼠标触发事件
        for (var i = 1; i < 4; i++) {
            var curC = document.getElementById("n" + i);
            var curB = document.getElementById("p" + i);
            var mores = document.getElementById("j" + i);
            if (n == i) {
                curC.style.display = "block";
                curB.className = "bt1";
                mores.style.display = "block";
            }
            else {
                curC.style.display = "none";
                curB.className = "bt2";
                mores.style.display = "none";
            }
        }
    }

css:

.tab span{ 
    float: left;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    width:100px; 
    line-height:30px;
    }
.tab span:hover{ 
    background:#0168b7; 
    color:#FFFFFF;
    width:100px;
    }

效果：

转载于:https://www.cnblogs.com/chervehong/p/10370818.html