知识基础：
* 这东西叫“通配符”用来匹配页面上所有元素。
*{margin:0;padding:0;}
对应的是页面上所有元素
定义和用法
<ul> 标签定义无序列表。
<li>标签定义列表项目。
定义和用法
opacity 属性设置元素的不透明级别。
opacity 属性设置或返回元素的不透明度。
元素的不透明度级别描述了透明度级别，当不透明度为 1 时表示完全不透明，当不透明度为 0.5时表示半透明，当不透明度为 0 时表示完全透明。
alpha滤镜
opacity是透明度
function test(){
alert("测试");
}
// 每过5秒钟就弹出提示信息"测试"。
var intervalId = setInterval(test, 5000);
// 由于此时上述定时设置尚未执行，因此可以成功取消该定时设置
clearInterval(intervalId);
定义和用法
onmouseover 属性在鼠标指针移动到元素上时触发。
index 属性可返回下拉列表中选项的索引位置。
<html> <head> <title> Tab 效果实现 </title> <style> *{margin:0;padding:0;} body{font-size:14px;font-family:"Microsoft YaHei";} ul,li{list-style:none;} #tab{position:relative;} #tab .tabList ul li{ float:left; background:#fefefe; background:-moz-linear-gradient(top, #fefefe, #ededed); background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed)); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border:1px solid #ccc; padding:5px 0; width:100px; text-align:center; margin-left:-1px; position:relative; cursor:pointer; } #tab .tabCon{ position:absolute; left:-1px; top:32px; border:1px solid #ccc; border-top:none; width:403px; height:100px; } #tab .tabCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } #tab .tabList li.cur{ border-bottom:none; background:#fff; } #tab .tabCon div.cur{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id = "tab" margin-left :460px margin-top:20px> <div class="tablist"> <ul> <li class="cur">许嵩</li> <li>周杰伦</li> <li>成龙</li> <li>林俊杰</li> </ul> </div> <div class="tabCon"> <div class="cur">想象之中，玫瑰花的葬礼</div> <div>双节棍，菊花台，稻香， 听妈妈的话</div> <div>北京欢迎你</div> <div>曹操, 一千年以后</div> </ul> </div> </div> <script> window.onload = function(){ var oDiv = document.getElementById("tab"); var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li"); var oCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div"); var timer = null; for(var i = 0; i < oLi.length; i++){ oLi[i].index = i; oLi[i].onmouseover = function(){ show(this.index); } } function show(a){ index = a ; var alpha = 0; for(var j = 0; j < oLi.length ; j++){ oLi[j].className = ""; oCon[j].className = ""; oCon[j].style.opacity =0; oCon[j].style.filter ="alpha(opacity =0)"; } oLi[index].className ="cur"; clearInterval(timer); timer = setInterval(function(){ alpha += 2; alpha >100 && (alpha = 100); oCon[index].style.opacity = alpha/100; oCon[index].style.filter ="alpha(opacity="+alpha +")"; alpha ==100 && clearInterval(timer); }, 5) } } </script> </body> </html> wangxiaoming 认证博客专家 架构 Spring Boot Redis 博客是很好的总结和记录工具，如果有问题，来不及回复，关注微信公众号：程序员开发者社区，获取我的联系方式，向我提问，也可以给我发送邮件,联系 1275801617@qq.com
