JS效果

!DOCTYPE HTML
html lang="en-US"
head
    meta charset="UTF-8"
    title/title
    style type="text/css" 
        .tab{
            float:left;
            width:150px;
            height:60px;
            border:1px solid #ddd;
            border-bottom:none;
            text-align:center;
            line-height:60px;
            cursor:pointer;
        }
        #tab0,#page0{
            background:#faa;
        }
        #tab1,#page1{
            background:#afa;
        }
        #tab2,#page2{
            background:#aaf;
        }
        .pageContainer{
            position:relative;
            clear:both
        }
        .pageContainer div{
            position:absolute;
            width:500px;
            height:100px;
            border:1px solid #ddd;
            border-top:none
        }
        .topPage{
            z-index:1
        }
    /style
/head
body
    h2多标签页效果/h2
    divclass="tab" onclick="showPage(0)"10元套餐/div
    divclass="tab" onclick="showPage(1)"50元套餐/div
    divclass="tab" onclick="showPage(2)"100元套餐/div
    divclass="pageContainer"
        divclass="topPage"10元套餐详情/div
        div50元套餐详情/div
        div100元套餐详情/div
    /div
    
    script type="text/javascript" 
        function showPage(num){
            //把其他标签页的class改为page
            var container = document.getElementById(‘pageContainer‘);
            var divList = container.getElementsByTagName("div");
            for(var i=0; idivList.len >h; i++){
                if(i!=num){
                    var div=divList[i];
                    div.removeAttribute("class");
                }
            }
            
            //把待显示的标签页的class改为page topPage
            var pageDiv = document.getElementById("page"+num);
            var classNode=document.createAttribute(‘class‘);
            classNode.value="topPage"
            pageDiv.setAttributeNode(classNode);
            
        }
    /script
/body
/html

View Code

JS效果

原文地址:http://www.cnblogs.com/AmbiguousMiao/p/7296428.html


最新回复(0)
/jishuaQx9me3uB0qDQIb7eczX3gC7uofnhn1KHUDpRw_3D_3D4719032
8 简首页