JS实现Tab菜单（网页无刷新）

最新推荐文章于 2019-05-14 10:35:34 发布

最新推荐文章于 2019-05-14 10:35:34 发布 · 187 阅读

文章标签：

#XHTML #HTML

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的Tab菜单交互实现方案，通过HTML和JavaScript实现了菜单项的切换效果，并展示了具体的代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <title>Tab菜单</title>
    <style type="text/css">
        body
        {
        	margin-bottom:20px;
        	background-color:Gray;
        }
        #tab{
	         width:780px;
	         border:0px; 
        }
        #menu
        {
        	float:left;
        	z-index:0;         
        }
        #menu ul
        {   
        	margin:0px;
        	padding:0px;
        	list-style-type:none;
        }
        #menu li
        {
        	 float:left;
	         display:block;
	         cursor:pointer;
	         width:130px;
	         text-align:center;
	         padding:10px 0px;
	         background-color:#a3dbff;
	         border-right:1px solid #fff;
        }
        #menu li.hover{
	        background:#fff;
	        border-bottom:solid 1px #fff;
        }
        #main1 
        {        	
        	z-index:-1;
        	position :relative;
        	top:-1px;
            clear:left;            
        	border:solid 1px blue;
        	background-color:#C6E2FF;
        }
        #main1 ul{
	        display: none;
	        list-style:none;
        }
        #main1 ul.block{
	        display: block;
        }
    </style>
    <script type="text/javascript">
         function setTab(n){
             var tli=document.getElementById("menu").getElementsByTagName("li");
             var mli=document.getElementById("main1").getElementsByTagName("ul");
             for(i=0;i<tli.length;i++){
              tli[i].className=i==n?"hover":"";
              mli[i].style.display=i==n?"block":"none";
             }
        }                
    </script>
</head>
<body>
    <div id="tab">
        <div id="menu">
          <ul>
            <li class="hover" onmouseover="setTab(0)">菜单1</li>
            <li onmouseover="setTab(1)">菜单2</li>
            <li onmouseover="setTab(2)">菜单3</li>                     
            <li onmouseover="setTab(3)">菜单4</li>                  
          </ul> 
        </div>
       <div  id="main1">
            <ul class="block">                   
              <li>aaaaaaaaa</li>
            </ul>
            <ul>
              <li>bbbbbbbbbb</li>
            </ul>
            <ul>
              <li>cccccccccc</li>
            </ul>
            <ul>
              <li>ddddddddd</li>
            </ul>
        </div>
    </div>
</body>
</html>