首页 > 代码库 > tab_切换

tab_切换

2024-08-18 11:39:33   225人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mx-con {
            height: 590px;
            background: #f8f8f8;
            position: relative;
        }

        ul.xy-pic {
            width: 1000px;
            height: 120px;
            margin: 0 auto;
            border-bottom: 2px solid #ed553e;
            font-size: 0;
            letter-spacing: normal;
            word-spacing: normal;
            text-align: center;
            font-size: 0;
            padding: 40px 0 0 0;
        }
        ul.xy-pic li {
            width: 90px;
            height: 115px;
            padding: 5px 6px 0 6px;
            background: url(global.png) no-repeat 0 -2852px;
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
            letter-spacing: normal;
            word-spacing: normal;
            margin: 0 21px;
            position: relative;
        }
        ul.xy-pic li a.cur1 {
            background: url(global.png) no-repeat 0 -2466px;
        }
        ul.xy-pic li a.cur2 {
            background: url(global.png) no-repeat 0 -2578px;
        }
        ul.xy-pic li a.cur3 {
            background: url(global.png) no-repeat 0 -2706px;
        }
        ul.xy-pic li.cur a.cur1, ul.xy-pic li a.cur1:hover {
            background: url(global.png) no-repeat -100px -2466px;
        }
        ul.xy-pic li.cur a.cur2, ul.xy-pic li a.cur2:hover {
            background: url(global.png) no-repeat -100px -2578px;
        }
        ul.xy-pic li.cur a.cur3, ul.xy-pic li a.cur3:hover {
            background: url(global.png) no-repeat -100px -2706px;
        }
        ul.xy-pic li a {
            width: 90px;
            height: 90px;
            display: block;
        }
        a {
            font-size: 12px;
            text-decoration: none;
        }
        ul.xy-pic li.cur i {
            display: block;
        }
        ul.xy-pic li i {
            width: 12px;
            height: 7px;
            overflow: hidden;
            background: url(global.png) no-repeat -100px -2983px;
            position: absolute;
            left: 50%;
            margin-left: -6px;
            bottom: -2px;
            display: none;
        }

        .xy-tips {
            line-height: 26px;
            padding: 32px 0 70px 0;
            text-align: center;
            font-size: 16px;
            text-align: center;
        }
        .xy-tips h5 {
            line-height: 70px;
        }
    </style>
</head>
<body>
<div class="mx-con">
    <ul class="xy-pic">
        <li id="t_one1" onm ouseover="setTab(‘t_one‘,1,3)" class="cur">
            <a class="cur1" href="javascript:"></a> <i></i> </li>
        <li id="t_one2" onm ouseover="setTab(‘t_one‘,2,3)" class="">
            <a class="cur2" href="javascript:"></a> <i></i> </li>
        <li id="t_one3" onm ouseover="setTab(‘t_one‘,3,3)" class="">
            <a class="cur3" href="javascript:"></a> <i></i> </li>
    </ul>
    <div class="xy-tips" id="t_one_con1" style="display: block;">不同浏览器对于相同元素的默认样式并不一致。
        <h5>—毛豆</h5>
    </div>
    <div class="xy-tips" id="t_one_con2" style="display: none;">而且不同内核的浏览器在某些控件（元素）的表现上也是各有差异。
        <h5>—春田花花</h5>
    </div>
    <div class="xy-tips" id="t_one_con3" style="display: none;">比如字体、缩进等等，这些问题都是由于浏览器的默认样式（CSS）在作怪，下面西部e网整理了一份浏览器默认css的样式表文件。
        <h5>—豆豆虫</h5>
    </div>



</div>
</body>
</html>
<script>
    function setTab(name,num,n){//t_one, index是否等于num,n是总数
        for(i=1;i<=n;i++){
            var menu=document.getElementById(name+i);//t_one+1
            var con=document.getElementById(name+"_"+"con"+i);//t_one_con+1
            menu.className=i==num?"cur":"";//当前cur下换背景图片，且让i标签display:block;如果当前的index值等于num，就添加样式cur，否则就清空；
            con.style.display=i==num?"block":"none";//如果当前的index值等于num，就让他显示，否则就隐藏
        }
    }

</script>

技术分享

技术分享

技术分享

tab_切换


联系
我们