{
    //方法一。代码最简洁。JQuery方式。记得head里加上jquery引用哦。
   /*-----
     $("p").on("click",function(){
         $(this).next().slideToggle(500);  
  })
 }
-----*/
 //方法二。效果：同方法一，点击后之前展开的p不折叠 。
    /*---
    var ps=document.getElementsByTagName("p");
      var uls=document.getElementsByTagName("ul");

  if(ps.length=uls.length){
     for(i=0;i<ps.length;i++){
        ps[i].id=i;
        ps[i].onclick=function(){
            if(uls[this.id].style.display=="block"){
            uls[this.id].style.display="none";   
            }
            else{
            uls[this.id].style.display="block";   
            }
        }
     }
   }
}
----*/
//方法三。效果：折叠。
    var p=document.getElementById("menu").getElementsByTagName("p");
 var ul=document.getElementById("menu").getElementsByTagName("ul");
    for(i=0;i<p.length;i++)
    {
  p[i].aa=i;
  p[i].onclick=function()
        {
   for(j=0;j<ul.length;j++)
            {
    ul[j].style.display="none";
     }
          ul[this.aa].style.display="block";
  }
 }
}

tab切换分为四类：划过切换；点击切换；延迟切换；自动切换；

tab选项卡的学习 在js中还有遮罩层

网页特效

Ok

选项卡

// 封装id函数 function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; } //加载 window.onload = function() { var index = 0; var timer = null; var titles = $("notice-title").getElementsByTagName("li"); var divs = $("notice-content").getElementsByTagName("div"); if(titles.length != divs.length) return; for(var i = 0; i < titles.length; i++) { titles[i].id = i; titles[i].onmouseover = function() { // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行 if(timer){ clearTimeout(timer); timer=null; } timer = setTimeout(() => { for(var j = 0; j < titles.length; j++) { titles[j].className = ""; divs[j].style.display = "none"; } this.className = "select"; divs[this.id].style.display = "block"; }, 400) } } }