JS实现的选项卡切换

最新推荐文章于 2023-01-05 15:00:37 发布

西湖猪

最新推荐文章于 2023-01-05 15:00:37 发布

阅读量317

点赞数

分类专栏： html 文章标签： JS 实现的选项卡切换导航栏

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</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" style="margin-left:460px;margin-top:20px">
  <div class="tabList">
    <ul>
        <li class="cur">菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
    </ul>
  </div>
  <div class="tabCon">
    <div class="cur">内容11111111111111111111111111</div>
    <div>内容222222222222222222222222222</div>
    <div>内容33333333333333333333333</div>
    <div>内容4444444444444444444444444444</div>
  </div>
</div>
<script>
window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = 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 = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
}
</script>
</body>
</html>

西湖猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现的选项卡切换

test*{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
复制链接

扫一扫

专栏目录